如何停止下拉菜單，jQuery？

Question

我的確有一個關於這個下拉菜單的研究。以下是代碼。

HTML：

<div id="top_nav"> 
    <ul class="nav"> 
     <li><a href="#">Menu One</a> 
      <ul> 
       <li><a href="#">The Quick</a></li> 
       <li><a href="#">Brown Fox</a></li> 
       <li><a href="#">Jumps Over</a></li> 
       <li><a href="#">The Lazy</a></li> 
       <li><a href="#">Dog</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu Two</a> 
      <ul> 
       <li><a href="#">The Quick</a></li> 
       <li><a href="#">Brown Fox</a></li> 
       <li><a href="#">Jumps Over</a></li> 
       <li><a href="#">The Lazy</a></li> 
       <li><a href="#">Dog</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu Three</a></li> 
     <li><a href="#">Menu Four</a> 
      <ul> 
       <li><a href="#">The Quick</a></li> 
       <li><a href="#">Brown Fox</a></li> 
       <li><a href="#">Jumps Over</a></li> 
       <li><a href="#">The Lazy</a></li> 
       <li><a href="#">Dog</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS：

#top_nav { width: 700px; margin: 20px auto 0 auto } 
    .nav { font-family: Arial, Helvetica, sans-serif; font-size: 14px } 
    .nav > li { float: left; margin-right: 7px; list-style: none; position: relative } 
    .nav > li > a { height: 30px; line-height: 30px; padding: 0 15px; background-color: red; color: white; text-decoration: none; display: block } 
    .nav > li > a:hover { background-color: blue } 
    .nav > li > ul { background-color: brown; position: absolute; width: 120px; padding: 0; list-style: none; display: none } 
    .nav > li > ul li a { color: white; text-decoration: none; padding: 7px; display: block } 
    .nav > li > ul li a:hover { background-color: yellow; color: red } 

和jQuery代碼：

$(".nav > li").mouseover(function(){ 
     $(this).find("> a").css("background-color", "blue"); 
     $(this).find("ul").fadeIn(500); 
    }) 
    $(".nav > li").mouseleave(function(){ 
     if($(this).children().size() > 1){ 
      $(this).find("ul").fadeOut(200, function(){ 
       $(this).prev().removeAttr("style"); 
      }); 
     } else { 
      $(this).find("> a").removeAttr("style"); 
     } 
    }) 

正如你所看到的。下拉效果表現平穩。但是，當用戶嘗試從左向右移動鼠標時，選擇所有頂級列表菜單，即使不必要，下拉效果也會繼續完成。

這是jQuery中缺少的代碼是什麼？

謝謝你的幫助。

Answer 1

嘗試

$(".nav > li").mouseover(function(){ 
        $(this).find("> a").css("background-color", "blue"); 
        $(this).find("ul").stop().fadeIn(500); 
    }) 
    $(".nav > li").mouseleave(function(){ 
        if($(this).children().size() > 1){ 
            $(this).find("ul").stop().fadeOut(200, function(){ 
                $(this).prev().removeAttr("style"); 
            }); 
        } else { 
            $(this).find("> a").removeAttr("style"); 
        } 
    })