jq导航二级菜单,但是上下老是晃动。

问题描述:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档 #ulstyle{ margin:0; padding:0; list-style-type:none; width:1100px; height:45px; background:#CC3300; color:#000000; font-size:18px; font-weight:bold; border:#000 solid 1px; overflow:visible; } #ulstyle li{ float:left; margin-left:50px; line-height:45px; width:150px; height:45px; position:relative; z-index:98; } #ulstyle li a{ text-decoration:none; display:block; color:#FFFFFF; width:150px; height:45px; background:#0099FF; text-align:center; } #download01{ list-style-type:none; width:148px; height:200px; margin:0; padding:0; border:#000000 solid 1px; background:#FF6600; display:none; position:absolute; top:46px; z-index:98px; } #download01 li{ height:25px; margin-left:0px; font-size:12px; clear:both; line-height:25px; width:148px; text-align:center; z-index:98px; }


  • Home

  • Download

    • gonxiazaiqu

    • xiaozaijdj

    • fjjowowowo

    • ooororrorrr
              </ul>
    
    
    
    
    
          </li>
    <li><a href="#">technologe</a></li>
          <li><a href="#">gaoshuxuexi</a></li>
          <li><a href="#">guanyuwomen</a></li>
    

$(document).ready(function() { $('#download').mouseover(function(){ $('#download01').slideDown(500); }) $('#download').mouseout(function(){ $('#download01').slideUp(500); }) }); //function aa(){ // document.getElementById('download01').style.display='block'; // } //function bb(){ // document.getElementById('download01').style.display='none'; // }


mouseover和mouseout改为mouseenter和mouseleave。

mouseover就算在对象子对象移动也会触发,enter和leave在子对象上不会触发

 <ul id="ulstyle">
<li><a href="#">Home</a></li>
<li id="download">
<a href="#">Download</a><ul id="download01">
<li>gonxiazaiqu</li>
<li>xiaozaijdj</li>
<li>fjjowowowo</li>
<li>ooororrorrr</li>

</ul>
</li>
</ul>
<script>

    $(document).ready(function () {
        $('#download').mouseenter(function () { $('#download01').stop(true, true).slideDown(500); }).mouseleave(function () { $('#download01').slideUp(500); }) 
});
</script>