JQuery Mouseleave ne fonctionne pas correctement?

Question

J'ai un petit problème, je fais une liste déroulante en utilisant l'aide de quelqu'un d'autre sur ce site. En utilisant le code html et code suivant

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_client"> 
    <ul> 
     <li><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><a href="service-plans.php" class="nav-mail">Mail</a></li> 
    </ul> 
</div> 

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

JS

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 */ 
    }); 
}); 

Cependant, quand je passe à la # menu déroulant-mail, il disparaît après une demi-seconde. Comment puis-je faire en sorte qu'il ne disparaisse pas à moins que le mouseleaves à la fois # dropdown-mail et # nav-mail

Merci!

Answer 1

Effacer le délai d'attente à l'entrée du # menu déroulant-mail ainsi:

$("#dropdown-main,#nav-mail").mouseover(function(){ 
    $("#dropdown-mail").show(); 
    clearTimeout(MailTimeout); 
});