DIV+CSS下拉导航菜单位置问题！

答案:3 悬赏:0 手机版

解决时间 2021-05-25 06:59

提问者网友：蔚蓝的太阳
2021-05-24 20:02

我在IE6跟IE7浏览，它的位置不相同的。

听说是层定位问题，请问要怎样解决呢？

急用。哪位兄弟可以说说！

<!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">
*{
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
}

#nav a{
display:block;
width:80px;
}
#nav{
margin:0;
padding:0;}

#nav li{
float:left;
text-align:center;

}

#nav li a{
color:#FFF;
background:#000;
height:25px;
}
#nav li a:hover{
color:#000;
background:#999;
}
#nav li ul{
list-style-type:none;
margin:0px;
padding:0px;
display:none;
}
#nav li ul li{
float:none;
}
#nav li ul li a{
width:80px;
height:25px;
background:#333;
color:#90F;
}
#nav li ul li a:hover{
background:#999;
color:#F00;
}
#ddss{
position:absolute;
top:40px;
left:9px;
width:950px;
height:20px;
background:#CCC;
margin:5px 0 0 0;
z-index:1
}
.yy{clear:both;height:10px;line-height:1px;font-size:1px;}
#ddst{
position:absolute;
top:10px;
left:9px;
margin:5px 0 0 0;
z-index:2
}
</style>
</head>

<body>

<div id="ddst">
<ul id="nav">
<li onmouseover="show('nav_1');" onmouseout="hide('nav_1')" ><a href="#">一</a>
<ul id="nav_1">
<li><a href="#">1-1</a></li>
<li><a href="#">1-2</a></li>
<li><a href="#">1-3</a></li>
</ul>
</li>
<li onmouseover="show('nav_2');" onmouseout="hide('nav_2')" ><a href="#">二</a>
<ul id="nav_2">
<li><a href="#">2-1</a></li>
<li><a href="#">2-2</a></li>
<li><a href="#">2-3</a></li>
</ul>
</li>
<li class="yy"></li>
</ul>
</div>
<div id="ddss">-------------------被挤走了，怎么办？？？---------------------------------

</div>

<script type="text/javascript">
function show(id){
document.getElementById(id).style.display='block';
}
function hide(id){
document.getElementById(id).style.display='none';
}
</script>
</body>
</html>

最佳答案

五星知识达人网友：掌灯师
2021-05-24 21:16

小鬼这我刚刚看到，用叠样式试下怎样了。

全部回答

1楼网友：北方的南先生
2021-05-24 23:36

<!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"> *{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; }

#nav a{ display:block; width:80px; } #nav{ margin:0; padding:0;}

#nav li{ float:left; text-align:center;

}

#nav li a{ color:#FFF; background:#000; height:25px; } #nav li a:hover{ color:#000; background:#999; } #nav li ul{ list-style-type:none; margin:0px; padding:0px; display:none; } #nav li ul li{ float:none; } #nav li ul li a{ width:80px; height:25px; background:#333; color:#90F; } #nav li ul li a:hover{ background:#999; color:#F00; } #ddss{ top:40px; left:9px; width:50%; height:20px; background:#CCC; z-index:1; float: left; margin-top: 5px; margin-right: 0; margin-bottom: 0; margin-left: 10px;; } .yy{clear:both;height:10px;line-height:1px;font-size:1px;} #ddst{ top:10px; left:9px; z-index:2; float: left; margin-top: 5px; margin-right: 0; margin-bottom: 0; margin-left: 0; } </style> </head>

<body>

2楼网友：十年萤火照君眠
2021-05-24 22:20

#ddss{ float:left; width:950px; height:20px; background:#CCC; margin:5px 0 0 0; z-index:1 }

这样就叠在一起了

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息