Keeping top menu item highlighted while in dropdow

2019-06-25 08:56发布

问题:

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

回答1:

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;
}


回答2:

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');
        });
    });


回答3:

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; }