[jQuery] mouseleave triggering "prematurely"?

[jQuery] mouseleave triggering "prematurely"?


i am trying to develop my own accordion/sliding menu. (as a side qn,
any good ones that can be easily customized/skinned?)
i found that seem to trigger when i am sliding down an "inner" menu.
since its "inner", my mouse definately has not left #mainnav
my test page http://iceangel89.5gigs.net/test.html
without that annoying test alert http://iceangel89.5gigs.net/test_1.html
$("#mainnav").mouseleave(function() {
alert("mouseleave #mainnav");
});
more complete source:
$(function() {
$("#mainnav > li > a").hover(mouseOver);
$("#mainnav").mouseleave(function() {
alert("mouseleave #mainnav");
});
});
function mouseOver() {
$(this).next("ul").slideDown("fast", function() {
$("li:has(ul) > a", this).hover(mouseOver);
});
}
#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;
}
<ul id="mainnav">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li>
<a href="#">Test</a>
<ul>
<li><a href="#">Test</a></li>
<li>
<a href="#">Test 1</a>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>