想做成天猫导航样子，不知道对不对 - 论坛

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ padding:0; margin:0;}
a{ text-decoration:none;}
ul{ list-style:none;}
.header{ width:100%; height:100px; background:#999999;}
.nav{ height:40px; width:100%; background:rgb(62,0,1);}
.nav ul{ width:980px; height:40px; background:rgb(221,31,31) ; margin:0 auto;}
.nav li{ float:left; position:relative;transition:0.3s; z-index:1; }
.nav li>a{ color:#fff; font-size:16px; text-align:center; line-height:40px; padding:0 30px; display:block;}
.nav li:hover>a{ background:rgb(221,39,39); color:#FFF}
.nav li a img{ display:none; transform:scale(0.5); position:absolute; top:0; left:0px; z-index:3}
.nav li:hover a>img{ display:block; top:-40px;}
.nav li .down{ width:150px; position:absolute; top:40px; left:0; display:none;}
.nav li .down a{ line-height:36px; color:#fff; display:block; padding-left:30px;
background:rgb(221,39,39); font-size:14px;}
.nav li:hover .down{ display:block}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav">
<ul>
<li>
<a href="#">首页<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div>
</li>
<li>
<a href="#">分类<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">案例展示
<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">练习我们<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">在线留言<img src="tianm_1.png" alt=""/></a>
</li>
</ul>
</div>
</body>
</html>

复制代码