Add / remove CSS text color based on hovering over another element / class

Question

I use Superfish and try to make the style a little different. Basically, when I hover over a menu using ul, the dropdown menu is fine, etc. When you hover over an item in this drop-down menu, the text color is beautiful, because I have this item with: hover.

When I do not smoke over this element, it uses the color of the top level.

I want him to stay white. Please ignore the background color difference, I tried to do something.

My CSS is http://pastebin.com/Hy1Rdwxb

Do I need to use jQuery.addClass so that it stays white?

Answer 1

Assuming this is what colors it:

.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #ae9b9d; outline: 0; color: #eee !important; } 

You want to change / add .sf-menu li:hover to .sf-menu li:hover > a to get the effect. The trouble is that it will not be painted on hover, because there is a more specific style for the a tag itself. The above allows you to use a tags directly below li for CSS style.

Note that the > operator should not stylize all the elements directly below, only the one you want, but will not work in IE 6 (since some of your styles seem to indicate that you support it, which you should not if your audience is not forcing your hand) which means that you will still see this discoloration in IE 6.