效果：http://hovertree.com/texiao/css3/19/
代码如下：
1 <!doctype html> 2 <!-- W3C规范 --> 3 <html lang="zh"> 4 <!-- 声明 --> 5 <head> 6 <meta charset="UTF-8"> 7 <!-- 声明当前页面的三要素 --> 8 <title>CSS3菜单仿小米官网菜单 - 何问起</title><base target="_blank" /> 9 <meta name="Keywords" content="关键字,何问起,菜单,CSS3"> 10 <meta name="Description" content="描述,hovertree.com,何问起CSS3菜单"> 11 <!-- 样式 --> 12 <style type="text/css"> 13 * { 14 margin: 0px; 15 padding: 0px; 16 } 17 18 .nav { 19 position: relative; 20 width: 994px; 21 height: 52px; 22 background: #404144; 23 margin: 0 auto; 24 } 25 26 .nav li { 27 list-style: none; 28 float: left; 29 line-height: 50px; 30 } 31 32 .nav li a { 33 display: block; 34 text-decoration: none; 35 color: #FFFFFF; 36 padding: 0px 15px; 37 font-family: "微软雅黑"; 38 } 39 40 .nav li a:hover .xs { 41 display: block; 42 } 43 44 .nav li a:hover { 45 background: #333333; 46 } 47 48 .nav li a .xs { 49 border: 1px solid #cccccc; 50 border-top: none; 51 display: none; 52 width: 992px; 53 background: #FFFFFF; 54 position: absolute; 55 top: 50px; 56 left: 0px; 57 } 58 59 .nav li a .xs .xiao { 60 position: absolute; 61 top: -8px; 62 border-left: 8px solid transparent; 63 border-right: 8px solid transparent; 64 border-bottom: 8px solid #FFFFFF; 65 width: 0px; 66 height: 0px; 67 z-index: 999; 68 } 69 70 .nav li:nth-child(1) .xiao { 71 left: 20px; 72 } 73 74 .nav li:nth-child(2) .xiao { 75 left: 98px; 76 } 77 78 .nav li:nth-child(3) .xiao { 79 left: 177px; 80 } 81 82 .nav li:nth-child(4) .xiao { 83 left: 255px; 84 } 85 86 .nav li:nth-child(5) .xiao { 87 left: 348px; 88 } 89 90 .nav li:nth-child(6) .xiao { 91 left: 427px; 92 } 93 94 .nav li:nth-child(7) .xiao { 95 left: 496px; 96 } 97 98 .nav li:nth-child(8) .xiao { 99 left: 576px; 100 } 101 102 .nav li:nth-child(9) .xiao { 103 left: 646px; 104 } 105 106 .nav li:nth-child(10) .xiao { 107 left: 706px; 108 } 109 .hovertreeinfo { 110 text-align:center;} .hovertreeinfo a{color:blue;} 111 </style> 112 </head> 113 114 <body> 115 <div class="nav"> 116 <ul> 117 <li><a href="http://hovertree.com/h/bjaf/5yh8pnpj.htm">首页</a></li> 118 <li> 119 <a href="http://hovertree.com/"> 120 何问起网 121 <div class="xs"> 122 <div class="xiao"></div> 123 <img src="http://hovertree.com/texiao/css3/19/img/1.jpg" /> 124 </div> 125 </a> 126 </li> 127 <li> 128 <a href="http://hovertree.com/code/javascript/8lp142er.htm"> 129 红米 130 <div class="xs"> 131 <div class="xiao"></div> 132 <img src="http://hovertree.com/texiao/css3/19/img/2.jpg" /> 133 </div> 134 </a> 135 </li> 136 <li><a href="http://hovertree.com/h/bjaf/v84hu8e9.htm">小米平板</a></li> 137 <li><a href="http://hovertree.com/code/jquery/qmio0dq9.htm">小米电视</a></li> 138 <li> 139 <a href="http://hovertree.com/h/bjaf/c7d7k8te.htm"> 140 盒子 141 <div class="xs"> 142 <div class="xiao"></div> 143 <img src="http://hovertree.com/texiao/css3/19/img/3.jpg" /> 144 </div> 145 </a> 146 </li> 147 <li> 148 <a href="http://hovertree.com/h/bjaf/nebj8df9.htm"> 149 路由器 150 <div class="xs"> 151 <div class="xiao"></div> 152 <img src="http://hovertree.com/texiao/css3/19/img/4.jpg" /> 153 </div> 154 </a> 155 </li> 156 <li><a href="http://hovertree.com/h/bjaf/a1wnr9gs.htm">合约机</a></li> 157 <li><a href="http://hovertree.com/h/bjaf/kqud99m6.htm">服务</a></li> 158 <li><a href="http://hovertree.com/h/bjaf/0i85qaml.htm">社区</a></li> 159 </ul> 160 </div> 161 <div class="hovertreeinfo"> 162 <a href="http://hovertree.com/h/bjaf/xiaomimenu.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> 163 </div> 164 </body> 165 </html>
转自：http://hovertree.com/h/bjaf/xiaomimenu.htm