<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
text-align: center;
padding:20px;
display:block;
text-decoration:none;
color:#abc;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:pink;
color:#ffffff;
width: 110px;
text-align: center;
border: 1px solid orange;
top:-10px;
left:-30px;
position: relative;
}
#nav ul li:hover ul li a:hover {
background:green;
color:#fff;
}
</style>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">首页</a></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>
<ul>
<li><a href="#">冬季</a></li>
<li><a href="#">夏季</a></li>
<li><a href="#">春季</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
原文：http://www.cnblogs.com/tiannanblog/p/5136314.html