CODEWITHSUNDEEP
jquery
llanato
llanato

Reputation: 2491

Dropdown Menu Hover LI Issue

This code is used for a dropdown menu, the issue is that when i hover over the li the dropdown opens fine and then when i moved the mouse over the new dropdown div the hover property of the li a is removed, I need the li a background to use the hover properties until the mouse moves away from the li a or dropdown div.

$("ul.nav li").hover(function(){
    $(this).find('.dropdown').toggle();
});

This is the menu code I'm using.

<ul class="nav">
    <li class="first"><a href="/">HOME</a></li>
    <li>
        <a href="#">CATEGORIES</a>
        <div class="dropdown" style="display: none">test</div>
    </li>
</ul>

Upvotes: 0

Views: 109

Answers (2)

jwitt98
jwitt98

Reputation: 1255

Instead of using the .hover function, use the mouseenter function tied to the "a" element to trigger the dropdown.

Then use the mouseleave function tied to the higher li element to hide the drop menu.

Upvotes: 0

Sadiq
Sadiq

Reputation: 2289

This can be done with just good ol' CSS. No need for jQuery.

.dropdown { display: none; }
.nav li:hover .dropdown { display: block; }

jsFiddle

Upvotes: 2

Related Questions