Question

I have a horizontal menu that uses spans to display a horizontal subnav directly below it. When you hover over the list item in the menu, the subnav displays that respective list item’s set of links.

The issue is that when I hover over a list item and then move the cursor down to the subnav, the list item reverts to it’s default color, but the list item remains in a hover state.

How can I stop the text from reverting back to it’s default color? Am I missing something in the CSS or is this something that might have to be accomplished in JavaScript.

Here is the example: http://jsfiddle.net/SeasonEnds/LSmfN/

Answer 1

Add this row of css

ul#topnav li:hover a { color: #828282;  }