Keeping top menu item highlighted while in dropdow

Question

Just putting together this site and would like the menu item with a dropdown to stay highlighted in white when you are hovering over the dropdown menu items. http://dl.dropbox.com/u/7086475/Paul%20Day/index.html

Answer 1

You can set a css class for the hover state of parent li using jquery or javascript.

Edit

You can set a css class like this...

$(document).ready(function() {
    $("#nav li li").mouseenter(function() {
      $(this).parent().parent().addClass("test");
    });

    $("#nav li li").mouseleave(function() {
      $(this).parent().parent().removeClass("test");
    });
});

and Css Style...

.test { font-weight:bold; color:#fff; }

Answer 2

Instead of using the #nav a:hover selector you can use #nav li:hover instead.

The li will remain in the hover state while you're in the submenu unlike the anchor.

It won't work in IE6 since the hover pseudo class only works on anchors.

#nav li:hover{
 color: #fff;
}

Answer 3

Use this jquery, it will work to solve your problem

$(function() {
        $('#nav li ul').hover(function() {
           $(this).prev('#nav li a').css('color', '#FF6600');
        }, function() {
            $(this).prev('#nav li a').css('color', '#fff');
        });
    });