Question

I’m using a simple Jquery drop down menu, found here http://wabism.com/jquery-drop-down-menu-tutorial/

I just wanted to know how I can get the Link that triggers the menu to stay Highlighted while hovering over links within the drop-down. Also, make ONLY the LINK of the top-level menu trigger the animation NOT the whole li class…

Someone helped me fix up the code to disable animation repeats. So I replaced default Plugin code with this//

$('body').ready(function() {
$('.dropdown').hover(function() {
if ($(this).find('.sub_navigation').is(":visible")) {
$(this).find('.sub_navigation').slideUp();} else {
$(this).find('.sub_navigation').slideDown();}
});
});

Here is a fiddle// http://jsfiddle.net/tUYfw/90/

Answer 1

I just wanted to know how I can get the Link that triggers the menu to stay Highlighted while hovering over links within the drop-down.

.dropdown:hover > a {
  background-color: #ccc;
}

Since the .dropdown list item encompasses the entire dropdown menu, it will always be hovered-over as long as the cursor is interacting with the dropdown. But we don’t want the entire list item to have a grey background, just the link. So we use the immediate child selector to style the parent link.

Also, make ONLY the LINK of the top-level menu trigger the animation NOT the whole li class…

That’s a little more tricky, because the act of hovering over the entire parent list item is what allows the dropdown to stay open.

Why do you need only the link to activate the menu? If you explain your reasoning maybe we can suggest a better alternative.