title: JQuery Mouseleave not working properly?
body: <p>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</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_client"&gt;
      &lt;ul&gt;
          &lt;li&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&gt;&lt;a href="service-plans.php" class="nav-mail"&gt;Mail&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="dropdown_mail"&gt;
       &lt;ul id="dropdown-mail"&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>
  
  <p>JS</p>
  
  <pre><code>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 */
    });
  });
  </code></pre>
  
  <p>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</p>
  
  <p>Thanks!</p>