一个简化版的导航,A是一级菜单,B是二级菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0; padding:0; list-style-type:none;}
nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;}
#A li{width:40px; height:40px; float:left; padding-left:20px;}
#B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}
</style>
</head>
<body>
<nav onmouseout="xi()">
<ul id="A">
<li onmouseover="show(0)">首页1</li>
<li onmouseover="show(1)">男装2</li>
<li onmouseover="show(2)">女装3</li>
<li onmouseover="show(3)">热卖4</li>
</ul>
<ul id="B">
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
<li>商品4</li>
</ul>
</nav>
</body>
<script>
var a=document.getElementById('A').getElementsByTagName('li');
var b=document.getElementById('B').getElementsByTagName('li');
function show(m){
b[m].style.display='block';
b[m].style.left=a[m].offsetLeft+'px';
}
function xi(){
for(var i=0;i< b.length;i++){
b[i].style.display='none';
}
}
</script>
</html>
我认为鼠标离开B, B才会消失, 因为B是nav里的元素啊
但是事实是鼠标一离开nav B就消失了
, 我看别人那么写的都可以啊 我的为什么不行了.... - -!好忧桑
(我也知道nav的height是40px),
有别的解决办法没
笨方法 在B里的每个li里都加上 onmouseout 和onmueseover..不想用啊
nav明明包含B的 ...