JQuery Mouseleave無法正常工作？

Question

我有一個小問題，我正在使用本網站的其他人的幫助下拉。使用下面的HTML和代碼

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

但是當我移動到＃下拉郵件它半秒鐘後消失。我怎樣才能使它不會消失，除非mouseleaves都＃下拉郵件和＃導航郵件

謝謝！

Answer 1

清除在進入＃下拉郵件超時，以及：

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