css制作导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
font-size: 13px;
font-family: "微软雅黑";
list-style: none;
}
.usernav>li{
list-style: none;
float: left;
position: relative;
}
.useraictive{
color: #D00000;
}
.usernav>li>a{
text-decoration:none;
color: #fff;
line-height: 40px;
text-align: center;
border-right: 1px solid #fff;
padding: 0 32px;
}
.usernav-wrap{
width: 1920px;
height: 40px;
background: #000;
}
.usernav{
margin-left: 200px;
}
.usernav .userlast{
border-right: none;
}
.usernav li ul{
position: absolute;
z-index: 3;
font-weight:bold;
background:#dedede;
max-height:0px;
transition:max-height 0.35s;
overflow:hidden;
}
.usernav>li:hover ul{
max-height:160px;
transition: ease 0.5s all;
}
.usernav li ul li{
width: 90px;
height: 40px;
text-align: center;
border-bottom: 1px solid #bbb ;
}
.usernav li ul a{
text-decoration: none;
color: #000000;
line-height: 40px;
}
</style>
</head>
<body>
<div class="usernav-wrap">
<ul class="usernav">
<li ><a href="">全部商品</a></li>
<li><a href="">首页</a></li>
<li ><a href="" class="useraictive">活动</a></li>
<li><a href="">客厅</a>
<ul>
<li><a href="">沙发</a> </li>
<li><a href="">茶几</a> </li>
<li><a href="">电视柜</a> </li>
<li style="border-bottom: none"><a href="">隔断柜</a> </li>
</ul>
</li>
<li><a href="">卧室</a>
<ul>
<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>
<li><a href="">餐桌</a> </li>
<li><a href="">餐椅</a> </li>
<li><a href="">餐边柜</a> </li>
</ul>
</li>
<li><a href="">书房</a>
<ul>
<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="" class="userlast">品牌历程</a></li>
</ul>
</div>
</body>
</html>
