效果：http://hovertree.com/texiao/css3/19/
代码如下：
<!doctype html>
<!-- W3C规范 -->
<html lang="zh">
<!-- 声明 -->
<head>
<meta charset="UTF-8">
<!-- 声明当前页面的三要素 -->
<title>CSS3菜单仿小米官网菜单 - 何问起</title><base target="_blank" />
<meta name="Keywords" content="关键字,何问起,菜单,CSS3">
<meta name="Description" content="描述,hovertree.com,何问起CSS3菜单">
<!-- 样式 -->
<style type="text/css">
* {
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;
}
.hovertreeinfo {
text-align:center;} .hovertreeinfo a{color:blue;}
</style>
</head> <body>
<div class="nav">
<ul>
<li><a href="http://hovertree.com/h/bjaf/5yh8pnpj.htm">首页</a></li>
<li>
<a href="http://hovertree.com/">
何问起网
<div class="xs">
<div class="xiao"></div>
<img src="http://hovertree.com/texiao/css3/19/img/1.jpg" />
</div>
</a>
</li>
<li>
<a href="http://hovertree.com/code/javascript/8lp142er.htm">
红米
<div class="xs">
<div class="xiao"></div>
<img src="http://hovertree.com/texiao/css3/19/img/2.jpg" />
</div>
</a>
</li>
<li><a href="http://hovertree.com/h/bjaf/v84hu8e9.htm">小米平板</a></li>
<li><a href="http://hovertree.com/code/jquery/qmio0dq9.htm">小米电视</a></li>
<li>
<a href="http://hovertree.com/h/bjaf/c7d7k8te.htm">
盒子
<div class="xs">
<div class="xiao"></div>
<img src="http://hovertree.com/texiao/css3/19/img/3.jpg" />
</div>
</a>
</li>
<li>
<a href="http://hovertree.com/h/bjaf/nebj8df9.htm">
路由器
<div class="xs">
<div class="xiao"></div>
<img src="http://hovertree.com/texiao/css3/19/img/4.jpg" />
</div>
</a>
</li>
<li><a href="http://hovertree.com/h/bjaf/a1wnr9gs.htm">合约机</a></li>
<li><a href="http://hovertree.com/h/bjaf/kqud99m6.htm">服务</a></li>
<li><a href="http://hovertree.com/h/bjaf/0i85qaml.htm">社区</a></li>
</ul>
</div>
<div class="hovertreeinfo">
<a href="http://hovertree.com/h/bjaf/xiaomimenu.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
</div>
</body>
</html>
转自：http://hovertree.com/h/bjaf/xiaomimenu.htm