小米官网的css3导航菜单

<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">
小米手机
<div class="xs">
<div class="xiao"></div>
<img src="img/1.jpg" />
</div>
</a>
</li>
<li>
<a href="#">
红米
<div class="xs">
<div class="xiao"></div>
<img src="img/2.jpg" />
</div>
</a>
</li>
<li><a href="#">小米平板</a></li>
<li><a href="#">小米电视</a></li>
<li>
<a href="#">
盒子
<div class="xs">
<div class="xiao"></div>
<img src="img/3.jpg" />
</div>
</a>
</li>
<li>
<a href="#">
路由器
<div class="xs">
<div class="xiao"></div>
<img src="img/4.jpg" />
</div>
</a>
</li>
<li><a href="#">合约机</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>

* {
margin: 0px;
padding: 0px;
}

.nav {
position: relative;
width: 994px;
height: 52px;
background: #404144;
margin: 0 auto;
}

.nav li {
list-style: none;
float: left;
line-height: 50px;
}

.nav li a {
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 0px 15px;
font-family: "微软雅黑";
}

.nav li a:hover .xs {
display: block;
}

.nav li a:hover {
background: #333333;
}

.nav li a .xs {
border: 1px solid #cccccc;
border-top: none;
display: none;
width: 992px;
background: #FFFFFF;
position: absolute;
top: 50px;
left: 0px;
}

.nav li a .xs .xiao {
position: absolute;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #FFFFFF;
width: 0px;
height: 0px;
z-index: 999;
}

.nav li:nth-child(1) .xiao {
left: 20px;
}

.nav li:nth-child(2) .xiao {
left: 98px;
}

.nav li:nth-child(3) .xiao {
left: 177px;
}

.nav li:nth-child(4) .xiao {
left: 255px;
}

.nav li:nth-child(5) .xiao {
left: 348px;
}

.nav li:nth-child(6) .xiao {
left: 427px;
}

.nav li:nth-child(7) .xiao {
left: 496px;
}

.nav li:nth-child(8) .xiao {
left: 576px;
}

.nav li:nth-child(9) .xiao {
left: 646px;
}

.nav li:nth-child(10) .xiao {
left: 706px;
}