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>
答
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>