Question

I have the following code

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

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

and I am trying to create a dropdown with it, however when I leave the #nav-mail area the #dropdown_mail hides, which doesn’t work as I need to be able to move from #nav-mail to #dropdown_mail without it closing.

So how can I make it so it allows for me to transverse from the #nav-mail to the #dropdown_mail and close only if its mouseleave both?

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

Change mouseenter to mouseover and set a timeout before hiding. The timeout will be removed if the user is still over the area. E.g.

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