CODEWITHSUNDEEP
csslistdrop-down-menu
ianbarnard
ianbarnard

Reputation: 51

Keeping top menu item highlighted while in dropdown

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

Upvotes: 4

Views: 6068

Answers (3)

naim shaikh
naim shaikh

Reputation: 1111

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

Upvotes: 0

Sam
Sam

Reputation: 146

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

Upvotes: 0

Jamie Dixon
Jamie Dixon

Reputation: 53991

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

Upvotes: 10

Related Questions