下拉菜单的JQuery mouseleave功能

Question

我想创建一个使用jquery/CSS的动画下拉菜单，并有动画使其显示正常，但我需要它隐藏下拉菜单onmouseout，但只是使用onmouseout获胜我不能和ul一起工作，当我徘徊在一个li上时，它会触发它。阅读其他帖子后，我虽然可以使用JQuery mouseleave函数，但无法使用它，任何人都可以提供帮助！

菜单：

<ul id="navList"> 
     <li><a href="/">Home</a></li> 
     <li id="about" onmouseover="dropDown();" ><a href="#">About me</a> 
      <ul id="drop"> 
       <li>What I do</li> 
       <li>CV</li> 
       <li>Photo Gallery</li> 
      </ul> 
     </li> 
    </ul> 

显示下拉功能：

<script type="text/javascript"> 
function dropDown() 
{ 

      $("#drop").animate({height:'100px'},300); 
      $("#drop").animate({opacity:'100'},300); 

}; 
</script> 

我试图用它来隐藏它的功能：

<script type="text/javascript"> 
$('#about').mouseleave(function(){ 
$("#drop").animate({height:'0px'},300); 
$("#drop").animate({opacity:'0'},300); 
}); 
</script> 

Answer 1

刚试用以下内容：

脚本部分：

<script type="text/javascript"> 
function dropDown() 
{ 
$("#drop").show().animate({height:'100px'},300).animate({opacity:'100'},300); 
} 
function mouseOut() 
{ 
$("#drop").animate({height:'0px'},300).animate({opacity:'0'},300); 
} 
$(function() { 
$("#drop").hide(); 
$("#about a").hover(dropDown,mouseOut); 
}); 
</script> 

HTML部分：

<ul id="navList"> 
     <li><a href="/">Home</a></li> 
     <li id="about"><a href="#">About me</a> 
      <ul id="drop"> 
       <li>What I do</li> 
       <li>CV</li> 
       <li>Photo Gallery</li> 
      </ul> 
     </li> 
</ul> 

我认为这可以帮助你解决你的问题。