Question

CSS制作的二级导航下拉菜单撑开DIV图层。怎么解决？

<style type="text/css">
.menu1{
width:120px;
height:auto;
margin:5px 4px 0px 0px;
padding:5px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:5px 4px 0px 0px;
padding:5px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
position:relative;
}
list
{
float:left;
width:100px;
height:250px;
position:absolute;
z-index:8888;
}
.navWrapper {
border-bottom:1px solid #36A3EA;
border-top:1px solid #36A3EA;

}

.nav {
width:872px;
margin:0 auto;
padding-top:0px;
text-align:center;

}

.nav a.selected {
border-bottom:4px solid #36A3EA;
text-decoration:none;
color:#36a3ea;

}

.nav a {
//font-size:14px;
display:inline-block;
height:30px;
padding:0 10px;
margin:0 10px;

}

.nav a:hover {
color:#36a3ea;
border-bottom:4px solid #36A3EA;
}
a:link, a:visited {
color: #7F7F7F;
text-decoration: none;
}
.head
{
float:none;
}

</style>
<div class="navWrapper">
<div class="nav">
<li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'"><a href="#" class="selected">
快速链接<div class="list">
<a href="http://www.webjx.com/">网页教学网</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
</div>
</div>
</div>

Answer 1

样式代码改成这样

ul, li { margin: 0px; padding: 0px; }
ul { list-style: none; }
a { font-size: 12px; color: #000000; text-decoration: none; }
.navWrapper { width: 100px; height: 30px; }
.navWrapper ul li { position: relative; }
.navWrapper ul li ul { display: none; position: absolute; left: 0px; top: 30px; width: 100px; }
.navWrapper a { display: block; height: 30px; line-height: 30px; text-align: center; background: #FF99CC; }
.navWrapper ul li:hover ul { display: block; }
.navWrapper ul li ul li a { color: #FFFFFF; background: #000000; }
页面代码改成这样

<div class="navWrapper">
<ul>
<li><a href="#"> 快速链接</a>
<ul>
<li><a href="http://www.webjx.com/">网页教学网</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</li>
</ul>
</div>
测试要在IE8以上版本哦！

追问

你这样是可以了。但是我想要的是上面代码生成的导航样子还有就是想知道为什么我的代码哪里错了。可以解答吗？

追答

你上面的代码本身有问题啊，不能把标记单独放置，他必须和放一起啊

追问

噢噢。好吧。还是谢谢你。