一個簡化版的導航,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的 ...
http://my.oschina.net/l3ve/blog/182203，這是解決方案，是由於onmouseout太過敏感，但是我感覺二級菜單這樣做不好，應該將二級菜單放到一級菜單的li中，而且你可以選擇jQuery來進行此類操作，不會出現onmouseout的問題
