[menu] individual style element (on hover)

[member08]

Hello,

sorry i know the title is far from clear :)

here's the deal :
i played a little with the Chrome CSS Drop Down Menu (http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm) but i can't figure out a way to apply different styles to each element.

i'd like the bg image/color (on mouse hover) to be different on each menu element. like green when the mouse is on resources, blue when it's on News, yellow on search etc..

thank you very much

[Medyman]

Hi...

The hover styles are set with this piece of CSS code:


.chromestyle ul li a:hover{
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

To customize it per element you can use a CSS class selector and define the individual backgrounds in the CSS.

You should have something like this currently:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

If you add some classes (highlighted) it will look like this:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a class="home" href="http://www.dynamicdrive.com">Home</a></li>
<li><a class="resources" href="#" rel="dropmenu1">Resources</a></li>
<li><a class="news" href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

Now, in the CSS you can set styles specific to those elements like so:


.chromestyle ul li a.resources:hover{
background: url(chromebg-over.gif) center center repeat-x;

You would, of course, repeat for the other class names (news, home, etc...).

Hope that helps :D

[member08]

perfect !

i was actually copying/pasting the whole chromestyle class, renaming it and changing colors and everything i needed

and i was applying the modified classes to the <li> not <a>

anyway, thank you very much for your help !