cant get travail menu vol stationnaire jquery

Question

Je ne peux pas obtenir le menu jquery pour fonctionner comme il se doit

Quand je passe la souris classe .trigger est glisse vers le bas, mais quand je vais avec ma souris glisser vers le haut et vers le bas tout le temps.

LIEN AVEC LE SITE WEB: HERE

Jquery

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('.sub_menu').hide(); 

     $('.trigger,.sub_menu').mouseenter(function() { 
     //show its submenu 
      $('.sub_menu').slideDown(300); 
     }); 

     $('.sub_menu,.trigger').mouseleave(function() { 
     //show its submenu 
      $('.sub_menu').slideUp(300); 
     }); 


    }); 
</script> 

HTML

<div id="header"> 
    <div class="container"> 
     <a href="index.php"><h1 id="logo">Dick van Leeuwen Financieel Consult</h1></a> 

     <div id="nav"> 
      <ul class="main_menu"> 
       <li><a href="#">Home</a></li> 
       <li> 
        <a href="#" class="trigger">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><a href="#">Downloads</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div><!-- nav --> 
    </div><!-- container --> 
</div><!-- header --> 

S'il vous plaît aidez-moi rester coincé pendant environ 5 heures maintenant.

Answer 1

vous pouvez faire du li votre déclencheur au lieu du a. De cette façon vous ne devriez pas obtenir l'événement mouseleave lors du survol de la sub_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><a href="#">Downloads</a></li> 
     <li><a href="#">Contact</a></li> 

puis changez js que:

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

Answer 2

Ce qui suit devrait résoudre votre problème.

$("a.trigger").parent().hover(function(e) { 
    //when over the li (could be the a or sub_menu) 
    $(this).find(".sub_menu").slideDown(300); 
},function(e) { 
    //when leaving the li 
    $(this).find(".sub_menu").slideUp(300); 
});