expandeble menu with css and hover effect.

[shedda]

Hi,

Do anyone of you have a clue how to make a menu like the one that the picture shows. I want a menu that changes color when hovered. Wordpress solves the change of color when a menu button is active, with the current class, but how do I make that little arrow on an expandebel button? If the menu buttons where just squares the a:hover effect would work just fine, but how can I add that little arrow?

 

[ronaldroe]

You'll have to use an image for that. That, or HTML entity #9660. Either way, set the li to position:relative, then wrap the image or character in a span that is position:absolute, and set the left offset to where you want it horizontally, and the bottom offset to whatever negative value you need to push it below the li.

 

[shedda]

ok, great. But how do I do the hover effect then?

 

[shedda]

What I mean is that I want the exact same background of the link as the active link (the square with the little arrow) when hovering the link. How can I do that with css? negative margins and so on, doesn't work with backgrounds? and that would not make the button expandebel?

 

[Phreaddee]

Yes it is and it will.
Do as ronald suggested.
On the hover state.
Add an id of selected if you desire it to stay highlighted on the page.