- 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;
}
$(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>
