Question

I’m using Superfish and trying to get the styling a little different. Basically, when I hover over a menu with a ul, the dropdown menu is fine etc. When hovering over an element in that dropdown, the text color is fine because I have that element styed with a :hover.

When I am not hovering over that element, it uses the color of the top level.

I want it to remain white – Please ignore the difference in background colors, I was trying something out.

My CSS
http://pastebin.com/Hy1Rdwxb

Do I have to use jQuery .addClass to get this to stay white?

Answer 1

Assuming this is what is coloring 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’ll 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 colored on hover because there is a more specific styling for the a tag itself. The above allows for a tags directly below the li to be styled with the CSS.

Note that the > operator is to not style all of the elements directly below, just the one you want, but won’t work in IE 6 (since some of your styles seem to indicate you’ll support it, which you shouldn’t unless your audience forces your hand) which means you will still see this discoloration in IE 6.