Julez Julez - 7 months ago 22
HTML Question

Jquery dropdown menu double dropdown

I have a jquery dropdown menu it works great.
Only there is 1 problem it slides 2 elements but i only want to dropdown the element i hover.

Link to the website: HERE

Jquery

$(document).ready(function () {

$('.sub_menu').hide(); //hiding the element

$('.trigger').mouseenter(function() {
$('.sub_menu').slideDown(350);
}).mouseleave(function() {
$('.sub_menu').slideUp(350);
});
});


HTML

<div id="nav">
<ul class="main_menu">
<li><a href="#">Home</a></li>
<li class="trigger">
<a href="#">Hypotheken</a>
<ul class="sub_menu">
<li><a href="#">Hypotheekvormen</a></li>
<li><a href="#">Hyporheek rente</a></li>
<li><a href="#">Nationale hypotheek garantie</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Verzekeringen</a></li>
<li class="trigger">
<a href="#">Downloads</a>
<ul class="sub_menu">
<li><a href="#">Hypotheekvormen</a></li>
<li><a href="#">Hyporheek rente</a></li>
<li><a href="#">Nationale hypotheek garantie</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- nav -->

Answer

Try this

$(document).ready(function () { 

        $('.sub_menu').hide(); //hiding the element

        $('.trigger').mouseenter(function() {
            $(this).children('.sub_menu').slideDown(350); 
        }).mouseleave(function() {
            $(this).children('.sub_menu').slideUp(350); 
        });   
});

In your code when you move the mouse over a menu item ALL the elements with class .sub_menu get selected and animated. But you need only the child of the current one.