JQuery Mouseleave not working properly?

Question

Hello,

I have a slight problem, I'm making a dropdown using the help from someone else on this site. Using the following html and code

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

However when I move to the #dropdown-mail it disappears after half a second. How can I make it so it doesn't disappear unless the mouseleaves both #dropdown-mail and #nav-mail

Thanks!

Answer 1

Clear the timeout on entry to the #dropdown-mail as well:

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