效果：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>