level 2
委婉且柔顺灬比目鱼01
楼主
如题，我制作了一个网页，导航栏用多级菜单。2级菜单默认隐藏，点击1级菜单显示出下拉的2级菜单发现被下面网页内容的块级元素给覆盖了，有什么办法能让2级菜单显示在顶层不被其它元素覆盖啊。一下是我模范小米官网的一个网页，点击右边的菜单下拉子菜单被那个手机图片挡住了！
2014年11月04日 07点11分
1
<style type="text/css">
body{
margin:0px;
padding:0px;
}
.main{
width:1200px;
height:700px;
margin:3px auto;
}
.left{
width:300px;
height:700px;
float:left;
background:#f60;
}
.menu{
width:900px;
height:100px;
float:right;
}
.content{
width:900px;
height:400px;
float:right;
background: #F63;
}
.footer{
width:898px;
height:199px;
float:right;
border:1px solid #CCCCCC;
}
table{
width:890px;
height:190px;
background:rgb(204,204,204)
}
dl{
width:900px;
height:400px;
position: relative;
overflow:hidden;}
dt{
position: absolute;
right:40px;
bottom:20px;
}
img{
width:900px;
height:350px;
}
dt a{
float:left;
display:block;
width:30px;
height:20px;
text-align:center;
text-decoration:none;
color:#FFF;
background: #AA9FAA ;
margin:2px;
line-height:20px;
font-size:10px;
}
dt a:hover{
background:#000;
}
dd{ border-bottom:1px solid #CFC;
width:900px;
height:350px;
margin-left:0px;
overflow:hidden;
}
.menu ul li {
list-style-type:none;
float:left;
}
.menu ul li a{
display:block;
text-align:center;
width:225px;
float:left;
text-decoration:none;
line-height:100px;
height:100px;
color:#FFF;
font-size:36px;
margin-top:-17px;
background:#666;
}
.menu ul li a:hover{
background: #000;
}
.menu ul li ul{
display:none;
}
.menu ul li:hover ul{
display:block;
width:185px;
margin-top:-3px;
height:100px;
background:f63;
padding-left:80px;
padding-top:2px;
font-weight:bold;
color: white;
position:absolute;
top:100px;
}
.menu ul li ul{
text-align:center;
}
.sy{
margin-left:-40px;
}
h3{
margin-top:-1px;
display:block;
width:300px;
height:100px;
background: #F90;
text-align:center;
font-size:24px;
color:white;
line-height:100px;
}
.p1{
background:#FFF;
margin-top:-8px;
}
p{ display:block;
background:#FFF;
width:274px;
height:115px;
margin:0px;
paddinpx;
border:1px solid #CCC;
color: #333;
font-size:20px;
font-family:"华文楷体";
padding-left:25px;
line-height:5px;
}
span{
color: #F30;
font-size:20px;
font-family: "华文楷体";
padding-left:3px;
line-height:70px;
}
p:hover{
background: rgb(204,204,204);
}
.footer ul li{
float:none;
color:rgb(0,0,0);
font-size:16px;
line-height:1.2em;
margin-top:10px;
}
.footer ul{
display:block;
float:left;
margin-left:20px;
color:rgb(255,102,0);
font-size:24px;
}
.footer ul a{
width:120px;
height:30px;
font-size:16px;
color:white;
line-height:30px;
margin-top:10px;
margin-left:15px;
display:block;
text-align:center;
text-decoration:none;
background:#FF6600;
border-radius:5px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<h3>全部商品分类</h3>
<p class="p1"><span>购买手机</span><br/>小米2s 小米3 小米4 红米</p>
<p><span>购买电视及平板</span> <br/>小米电视 小米盒子 小米平板</p>
<p><span>后盖及个性化配件</span><br/>米键 后盖 贴纸 手机支架</p>
<p><span>移动电源与电池</span><br/>小米移动电源 小米电池</p>
<p><span>耳机与音箱</span><br/>活塞耳机 普通耳机 小米音箱</p>
</div>
<div class="menu">
<ul >
<li><a href="#" class="sy">首页</a></li>
<li><a href="#">小米手机</a>
<ul>
<li>￥1999</li>
</ul>
</li>
<li><a href="#">小米平板</a>
<ul>
<li>￥2999</li>
</ul>
</li>
<li><a href="#">小米电视</a>
<ul>
<li>￥3999</li>
</ul>
</li>
</ul>
<div class="content">
<dl>
<dt>
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
<a href="#img5">5</a>
</dt>
<dd>
<img src="images/1.jpg" id="img1" />
<img src="images/2.jpg" id="img2" />
<img src="images/3.jpg" id="img3" />
<img src="images/4.jpg" id="img4" />
<img src="images/5.jpg" id="img5" />
</dd>
</dl>
</div>
<div class="footer">
<ul>帮助中心
<li>购物指南</li>
<li>支付方式</li>
<li>配送方式</li>
</ul>
<ul>服务支持
<li>售后服务</li>
<li>相关下载</li>
<li>售后政策</li>
</ul>
<ul>小米之家
<li>小米之家</li>
<li>服务网点</li>
<li>联系我们</li>
</ul>
<ul>400-100-9263
<li>周一至周日（8：00-20：00）</li>
<a href="#">在线客服</a>
</ul>
</div>
</div>
</body>
</html>
2014年11月04日 10点11分
![[哈哈]](/static/emoticons/u54c8u54c8.png)
