Question

I have a horizontal nav menu that I am working on. I have one issue left with this menu. When the user navigates to a page, I would like the main li to remain hovered. Right now, the li does not remain in a hovered state and simply reverts to default. Do I need to give the body a class to make this work or is there another way? The code snippet can be found here: http://jsfiddle.net/SeasonEnds/LSmfN/

Ideally, the Read tab should take on the hover styles upon on loading the page, but go away as the user hovers over the other main nav links.

Answer 1

The highlight on the active element shouldn’t really disappear when the user hovers on another top-level link as this is bad for usability – if the user doesn’t click on a link then they’ve lost the visual clue as to where they are on your site.

I’ve amended the css slightly:

ul#topnav li.on a    {color:#828282; background: #f3f3f3; }
ul#topnav li a:hover {background: #f3f3f3; color:#828282;}
ul#topnav li a:visited {color:#828282; }

I’ve also added a bit of jQuery to keep the colour of the active top-level link as you hover over the children:

$("li a").hover(function(){
    $(this).parent().prev().toggleClass("top-level-highlight");
});

Updated fiddle:
http://jsfiddle.net/LSmfN/14/