Change text color of menu items, ONLY on hover

Question

I have a site here

At the top of the screen, you'll see a menu. Hover onto "Everything" and you'll see a sub-menu.

When you hover over an item, you'll see a dark grey background on each menu item. The text stays red, and I want the text to be white on hover.

Here's what I have so far...

#nv-tabs ul li ul li:hover {background: #252525!important; }

It looks like the text color (on hover) should also be in this div id, so I've tried this...

#nv-tabs ul li ul li:hover {background: #252525!important;color: #FFFFFF;}

...but it's not working.

Not sure where I'm going wrong here.

Answer 1

Try

#nv-tabs ul#dyndropmenu.menu li ul.sub-menu li a:hover {
    color:white !important;
}

^ should make the text white on hover while the other texts stay red.

Answer 2

Try something like this #nv-tabs ul li ul li:hover a {color: white !important;}

Considering you said your code is not working... you may have something setting the color of the text of your <a> tags directly... that's why you possibly need to access directly your <a> tags to change their text color...

I can see this in your code :

#nv-tabs a { 
  color: #000000;
}

I think this is why you must access your <a> tags directly to change the color. If the color was set with #nv-tabs ul li ul li you could probably do #nv-tabs ul li ul li:hover to change it.

If someone can name this behaviour, I'd be pleased. I don't know how it is called, but I'm pretty sure that's how it works.