Main nav takes on hover style on page load - css

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/

Answer 2

There's no way for the menu to know which page it's on without either the server setting the active menu element, or JS indicating the active element.
Here's what you can do - add a class "here" to indicate the current position:
ul#topnav li:hover, ul#topnav li.here {background: #f3f3f3;
Detect the current page using js:
//var here = document.location+"" //for production
var here = "/home.html" //for testing
if(here.indexOf("home.html")>-1) {
$('ul#topnav li').eq(0).addClass('here')
$('ul#topnav li').mouseout(function() {
$('ul#topnav li').removeClass('here')
})
} //repeat for all pages