为什么css做的二级导航,当鼠标停留在一级上时候,二级菜单正常显示。当鼠标移动到二级菜单,

为什么css做的二级导航,当鼠标停留在一级上时候,二级菜单正常显示。当鼠标移动到二级菜单,整个二级菜单就都隐藏了?
#navigator{
height:30px;
width:720px;
float:left;
margin-left:130px;
margin-top:7px;
}
#navigator ul{
margin:0px;
padding:0px;
list-style-type:none;
display:block;
}
#navigator li{
float:left;
font-weight:bold;
text-align:center;
font-size:14px;
}
#navigator li a{
display:block;
width:84px;
line-height:28px;
color:#FFF;
text-decoration:none;
}
#navigator ul ul{
width:84px;
height:110px;
background-color: #066;
display:none;
}
#navigator ul ul li a{
color: #F00;
}
#navigator ul li:hover ul {
display:block;
background-color: #FFF;
}
我加入position:realitive 然后就正常了 为什么啊

如果我猜的不错的话,你用的方法是鼠标在一级上时,二级的display设置为block,当鼠标离开一级时display为none。所以当你的鼠标离开一级指向二级时二级隐藏了。
你可以这样写,当鼠标指向一级节点时,它的二级节点为显示,而其他一级节点的二级节点隐藏;当鼠标离开时不需要做函数处理。
下面是我做的一个简单的例子,希望对你有帮助
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
li{
float:left;
border:1px solid red;
}
li ul li{
position:relative;
border:none;
background:#0FF;
float:none;
}
li ul{
display:none;
}
</style>
<script type="text/javascript" >
function testShow(num){
//alert("the show");
for(var i=1; i<5; i++){
var obj=document.getElementById("test"+i);
obj.style.display="none";
}
var obj1=document.getElementById("test"+num);
obj1.style.display="block";
}
</script>
</head>

<body>
<input type="button" value="click" onclick="testShow()" />
<ul>
<li onmouseover="testShow(1)">第一个第一层
<ul id="test1">
<li>第一个第二层</li>
<li>第一个第二层</li>
</ul>

<li onmouseover="testShow(2)">第二个第一层
<ul id="test2" >
<li>第二个第二层</li>
<li>第二个第二层</li>
</ul>
<li onmouseover="testShow(3)">
第三个第一层
<ul id="test3">
<li>第三个第二层</li>
<li>第三个第二层</li>
</ul>
</li>
<li onmouseover="testShow(4)">
第四个第一层
<ul id="test4" >
<li>第四个第二层</li>
<li>第四个第二层</li>
</ul>
</li>
<li></li>
</ul>

</body>
</html>
温馨提示:答案为网友推荐,仅供参考
第1个回答  2011-11-03
从你的代码可以看出 display:none为不显示 如果要其显示的话为display:block;当鼠标移动到一级导航li:hover改变display才会显示,也就是移动到li的内容中才能显示,当你移到二级导航中时加上一个relative为相对定位,占元素空间默认为li的一部分,因此显示正常
第2个回答  2015-05-18
求助 在哪加啊?
第3个回答  2011-11-04
第4个回答  2011-10-31
请设置绝对定位
相似回答