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>
轉載于:https://www.cnblogs.com/zhaocong/p/7324127.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： Jmeter 参数化请求实例
- 下一篇： android 底部表格布局TableL