<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>此代码有BUG，在两个li之间快速切换的时候会出现BUG</title>
<style type="text/css">
ul{margin:0; padding:0;}
#nav {margin:0 auto; width:900px; height:40px;}
a {text-decoration:none;padding:0 20px; font:"微软雅黑"; font-size:20px; display:block; width:90px; height:40px;}
a:hover{background-color:#999999; color:#FFFFFF;}
ul {list-style:none; }
ul li {float:left; background-color:#CCCCCC; height:40px; line-height:40px; text-align:center; position:relative; }
ul li ul {display:none; position:absolute; height: 0;overflow: hidden;}
ul li ul li{float:none; margin-top:2px;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">第二个</a></li>
<li ><a href="#">第三个</a>
<ul id="one">
<li><a href="#">下拉一</a></li>
<li><a href="#">下拉二</a></li>
<li><a href="#">下拉三</a></li>
</ul>
</li>
<li><a href="#">第四个</a></li>
<li ><a href="#">第五个</a>
<ul id="two">
<li><a href="#">下拉四</a></li>
<li><a href="#">下拉五</a></li>
<li><a href="#">下拉六</a></li>
</ul>
</li>
<li><a href="#">第六个</a></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function () {
var lis = document.getElementsByTagName("li");
for(var i = 0 ; i<lis.length;i++){
lis[i].onmouseover = function(){
var u = this.getElementsByTagName("ul")[0];
if(u != undefined){
u.style.display = "block";
AddH(u.id);
}
}
lis[i].onmouseout = function(){
var u = this.getElementsByTagName("ul")[0];
if(u != undefined){
// u.style.display = "none";
SubH(u.id);
}
}
}
}
function AddH(id){
var ulList = document.getElementById(id);
var h = ulList.offsetHeight;
h += 1;
if(h<= 132){
ulList.style.height= h +"px";
setTimeout("AddH('" + id + "')",10);
}
else{
return;
}
}
function SubH(id){
var ulList = document.getElementById(id);
var h = ulList.offsetHeight;
h -= 1;
if(h>= 0 ){
ulList.style.height= h +"px";
setTimeout("SubH('" + id + "')",10);
}
else{
ulList.style.display = "none";
return;
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消