title: Why is mouseleave triggering
body: <p>I am trying to develop my own accordion/sliding menu. (as a side question, any good ones that can be easily customized/skinned?)</p>
  
  <p>I found that seem to trigger when I am sliding down an "inner" menu. Since it's "inner", my mouse definitely has not left <code>#mainnav</code>.</p>
  
  <p>My test page <a href="http://iceangel89.5gigs.net/test.html" rel="nofollow noreferrer">here</a></p>
  
  <p>Without that annoying test alert <a href="http://iceangel89.5gigs.net/test_1.html" rel="nofollow noreferrer">here</a></p>
  
  <pre><code>$("#mainnav").mouseleave(function() {
      alert("mouseleave #mainnav");
  });
  </code></pre>
  
  <p><strong>more complete source:</strong></p>
  
  <pre><code>$(function() {
      $("#mainnav &gt; li &gt; a").hover(mouseOver);
      $("#mainnav").mouseleave(function() {
          alert("mouseleave #mainnav");
      });
  });
  function mouseOver() {
      $(this).next("ul").slideDown("fast", function() {
          $("li:has(ul) &gt; a", this).hover(mouseOver);
      });
  }
  </code></pre>
  
  <pre>
  #mainnav, #mainnav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      background: #bbb;
  }
  #mainnav ul {
      display: none;
      margin: 5px 10px;
  }
  #mainnav a {
      display: block;
      padding: 5px 10px;
      margin: 2px 0;
      background: yellow;
  }
  </pre>
  
  <pre>&lt;ul id=&quot;mainnav&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; 
          &lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt; 
                  &lt;a href=&quot;#&quot;&gt;Test 1&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </pre>