Mouseleave éléments cachés?

Question

J'ai le code suivant

$("#nav-mail").mouseenter(function(){ 
    $("#dropdown_mail").show(); 
}); 

$("#dropdown_mail,#nav-mail").mouseleave(function(){ 
    $("#dropdown_mail").hide(); 
}); 

et je suis en train de créer un menu déroulant avec elle, mais quand je quitte la zone # nav-mail les peaux de #dropdown_mail, qui ne fonctionne pas comme je dois être capable de passer de # nav-mail à #dropdown_mail sans fermeture.

Alors, comment puis-je faire en sorte qu'il me permette de transverse de la # nav-mail à la #dropdown_mail et fermer seulement si son mouseleave les deux?

HTML

<div id="navbar"> 
    <!-- Navigation --> 
    <ul> 
     <li id="current"><a href="dashboard.php" class="nav-dashboard">Dashboard</a></li> 
     <li><a href="client.php" class="nav-client">Client</a></li> 
     <li><a href="how-it-works.php" class="nav-system">System</a></li> 
     <li id="nav-mail"><a href="service-plans.php" class="nav-mail">Mail</a></li> 
    </ul> 
    <!-- End Navigation --> 
</div> 

<div id="dropdown_mail"> 
    <ul> 
     <li><a href="email_templates.php">Email Templates</a></li> 
    </ul> 
</div> 

Answer 1

changement mouseenter-mouseover et définir un timeout avant de se cacher. Le timeout sera supprimé si l'utilisateur est toujours au-dessus de la zone. Par exemple.

var MailTimeout; 

function hideMailDropdown() { 
    $("#dropdown_mail").hide(); 
    clearTimeout(MailTimeout); 
} 

$(document).ready(function() { 
    $("#nav-mail").mouseover(function(){ 
    $("#dropdown_mail").show(); 
    clearTimeout(MailTimeout); 
    }); 

    $("#dropdown_mail,#nav-mail").mouseleave(function(){ 
    var MailTimeout=setTimeout("hideMailDropdown()",500); /* Wait half a second before hiding */ 
    }); 
});