jquery - why is mouseleave triggering
<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">here</a></p>

<p>Without that annoying test alert <a href="http://iceangel89.5gigs.net/test_1.html" rel="nofollow">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>
