Mouseleave hiding elements?
<p>I have the following code</p>

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

$("#dropdown_mail,#nav-mail").mouseleave(function(){
  $("#dropdown_mail").hide(); 
});
</code></pre>

<p>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.</p>

<p>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?</p>

<p>HTML</p>

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

&lt;div id="dropdown_mail"&gt;
     &lt;ul&gt;
        &lt;li&gt;&lt;a href="email_templates.php"&gt;Email Templates&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
