[jQuery] Re: mouseleave triggering "prematurely"?

take a closer look at how hover function works. It requires *two* functions called. You are also embedding a hover function within a hover function (mouseover) then calling the mouseover function within itself

http://docs.jquery.com/Events/hover

try this and see if this is the effect you want

 $(function() {
                $("#mainnav > li > a").mouseover(function() {
                     $(this).next("ul").slideDown("fast").addClass("open");              
                });
               
                $("#mainnav").mouseleave(function() {
                    $(".open").slideUp("fast")
                 });
            });

iceangel89 wrote:

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>