Question

I’m building a navigation with drop down menus. I’d like the line item that contains the unordered list, subnav, to have white anchor text when hovered. I have done this but my selector has resulted in a bug with one of the drop down line items. Please see: http://jsfiddle.net/W3Dzd/
If you hover over “sui generis” and run the cursor down the menu it works fine except for “mantels” – the anchor text does not change color when hovered.
I guess that what has happened is that the selector for the 3rd line item in the main nav has also selected the 3rd line item in the subnav.
Can someone suggest a better selector or way around this?

Answer 1

If it is possible for you to change the code which generates your menus (or to manually change them if you are hand-coding them) you will end up with a much more robust system by applying your submenu class to the parent li instead of the child ul. Your previous code was targeting specific list items via complex selectors that would break if you rearranged your menu or added/removed items from it. The new code will handle these cases without issue.

You can see a sample of how this might work in action at this updated jsFiddle: http://jsfiddle.net/W3Dzd/4/