{覆盖问题解决}
导航栏的对其和对下覆盖
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
body {
margin-top: 500px;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.nav {
position: relative;
width: 500px;
margin: 0 auto;
background: #437b79;
color: white;
}
.con:hover div {
display: block;
}
.con {
width: 100px;
background: #7a2880;
float: left;
margin-left: 20px;
list-style: none;
text-align: center;
}
.con div {
display: none;
position: absolute;
left: 0;
width: 500px;
text-align: center;
background: #ffb3e2;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li class="con">
列表1
<div>
内容1
</div>
</li>
<li class="con">
列表2
<div>
内容2
</div>
</li>
<li class="con">
列表3
<div>
内容3
</div>
</li>
<li class="con">
列表4
<div>
内容4
</div>
<!-- 清除浮动 -->
<li class="clearfix"></li>
</li>
</ul>
</div>
</body>
</html>
主要内容是：先有一个div（形成块）内包relative设置width左右margin为auto的ul，ul下有设置float和width的li(可多个），li内包含显示部分和隐藏部分div，其中隐藏部分div设置absolute定位和left：0之后通过li：hover显示。
网友评论