二级nav
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
min-width: 900px;/*解决页面缩小时右面的留白*/
}
nav {
background: #333;
height: 40px;
line-height: 40px;
}
nav .con{
width: 900px;
margin: 0px auto;
}
nav li{
width: 100px;
float: left;
list-style: none; /*去除li前面的点*/
text-align: center;
position: relative;
}
nav li:hover{
background: red;
}
nav a{
color: #fff;
width: 100px;
float: left;
text-decoration: none;/*去除a标签的下划线*/
font-family: "微软雅黑";
}
.child{
position: absolute;
top: 40px;
left: 0px;
width: 100px;
background: #555;
display: none;
}
nav li:hover .child{
display: block;
}
</style>
</head>
<body>
<nav>
<div class="con">
<ul>
<li>
<a href="#">秒杀</a>
<ul class="child">
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
</ul>
</li>
<li>
<a href="#">优惠券</a>
<ul class="child">
<li><a href="#">优惠券</a></li>
<li><a href="#">优惠券</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
</ul>
</li>
<li><a href="#">闪购</a>
<ul class="child">
<li><a href="#">闪购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
<li><a href="#">秒杀一</a></li>
</ul>
</li>
<li><a href="#">拍卖</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">京东超市</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">京东金融</a></li>
</ul>
</div>
</nav>
<div class="banner">
</div>
</body>
</html>
三级nav
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
min-width: 900px;/*解决页面缩小时右面的留白*/
}
nav{
background: #333;
height: 40px;
}
nav .con{
width: 900px;
margin: 0 auto;
}
nav li{
list-style: none;
text-align: center;
line-height: 40px;
position: relative;
float: left;
width: 100px
}
nav a{
color: #fff;
width: 100px;
float: left;
text-decoration:none;
font-family: "微软雅黑"
}
nav li:hover{
background: red
}
.child{
position: absolute;
top:40px;
left: 0px;
background: #555;
display: none;
}
.child li{
position: relative;
}
nav li:hover .child{
display: block;
}
.child-1{
position: absolute;
left: 100px;
top:0px;
display: none;
background: #555
}
.child li:hover .child-1{
display: block;
}
</style>
</head>
<body>
<nav>
<div class="con">
<ul>
<li><a href="#">秒杀</a>
<ul class="child">
<li><a href="#">全球购</a>
<ul class="child-1">
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">秒aa杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
</ul>
</li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
</ul>
</li>
<li><a href="#">优惠券</a>
<ul class="child">
<li><a href="#">全球购</a>
<ul class="child-1">
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">秒aa杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
</ul>
</li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
</ul>
</li>
<li><a href="#">拍卖</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">京东超市</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">京东金融</a></li>
</ul>
</div>
</nav>
</body>
</html>
网友评论