JQuery выпадающее меню double dropdown

Question

У меня есть выпадающее меню jquery, оно отлично работает. Только есть 1 проблема, она скользит 2 элемента, но я хочу только выпадающий элемент i hover.

Ссылка на сайт: 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 1

Попробуйте

$(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); 
     }); 
}); 

В вашем коде при перемещении мыши на менюitem ВСЕ элементы с классом .sub_menu выбираются и анимируются. Но вам нужен только ребенок текущего.