用css制作横向导航栏当鼠标放在导航栏时 下拉菜单不能跟上方导航栏目对...
发布网友
发布时间：2022-04-26 08:58
共2个回答
热心网友
时间：2022-04-06 14:49
"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>
<link href="横向导航栏.css" rel="stylesheet" type="text/css"/>
<script language="javascript1.2" type="text/javascript" src="nn.js"></script>
<style>
.m1 {
border:1px solid green;
margin:100px auto;
width:500px;
height:150px;
padding:20px;
}
.m2 {
width:300px;
margin:40px auto;
}
ul {
padding:0;
margin:0;
}
#m3 li {
float:left;
list-style-type:none;
width:100px;
line-height:26px;
text-align:center;
}
#m3 li ul {
left:-999px;
position:absolute;
}
#m3 li ul li {
width:99px;
height:24px;
background:#eeeeee;
list-style-type:none;
}
#m3 li a {
text-decoration:none;
color:black;
background:fuchsia;
display:block;
border:1px solid green;
}
#m3 li ul li a {
font-size:12px;
color:#333333;
background:green;
}
#m3 li ul li a:hover {
background:#333333;
color:#ffffff;
}
#m3 li.sfhover ul {
left:auto;
margin-left:-50px
}
</style>
</head>
<body>
<div class="m1">
<div class="m2">
<ul id="m3">
<li style="left:auto;"><a href="#">导航栏目1</a>
<ul>
<li><a href="#">下拉栏目栏目1</a></li>
<li><a href="#">下拉栏目栏目2</a></li>
<li><a href="#">下拉栏目栏目3</a></li>
</ul>
</li>
<li><a href="#">导航栏目2</a>
<ul>
<li><a href="#">下拉栏目栏目1</a></li>
<li><a href="#">下拉栏目栏目2</a></li>
<li><a href="#">下拉栏目栏目3</a></li>
</ul>
</li>
<li><a href="#">导航栏目3</a>
<ul>
<li><a href="#">下拉栏目栏目1</a></li>
<li><a href="#">下拉栏目栏目2</a></li>
<li><a href="#">下拉栏目栏目3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("m3").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
热心网友
时间：2022-04-06 16:07
{float:left;
list-style-type:none;
width:100px;
line-height:26px;
text-align:center;
position:relative; /*给li相对定位，这样给二级的ul定位*/
}
#m3 li ul
{width:300px; /*针对IE6指定二级菜单的宽度，横向显示*/
left:0; /*改为了0*/
position:absolute;
visibility:hidden; /*默认状态下设置隐藏*/
}
#m3 li.sfhover ul
{left:0; /*改为了0*/
visibility:visible; /*js改变样式后显示出来*/
}
你的菜单问题是不兼容IE6，IE6下二级菜单位置向右偏了，而且二级菜单没有横向显示，而是纵向显示了。
我把需要修改的地方用css hack写出来了。
修改后的兼容IE6/7/8。
不过你这菜单本身也不支持firefox，chrome，你可以找个好点的菜单，搜下jquery二级菜单，很多的。
