小米官网的css3导航菜单
HTML代码：
1 <div class="nav"> 2 <ul> 3 <li><a href="#">首页</a></li> 4 <li> 5 <a href="#"> 6 小米手机 7 <div class="xs"> 8 <div class="xiao"></div> 9 <img src="img/1.jpg" /> 10 </div> 11 </a> 12 </li> 13 <li> 14 <a href="#"> 15 红米 16 <div class="xs"> 17 <div class="xiao"></div> 18 <img src="img/2.jpg" /> 19 </div> 20 </a> 21 </li> 22 <li><a href="#">小米平板</a></li> 23 <li><a href="#">小米电视</a></li> 24 <li> 25 <a href="#"> 26 盒子 27 <div class="xs"> 28 <div class="xiao"></div> 29 <img src="img/3.jpg" /> 30 </div> 31 </a> 32 </li> 33 <li> 34 <a href="#"> 35 路由器 36 <div class="xs"> 37 <div class="xiao"></div> 38 <img src="img/4.jpg" /> 39 </div> 40 </a> 41 </li> 42 <li><a href="#">合约机</a></li> 43 <li><a href="#">服务</a></li> 44 <li><a href="#">社区</a></li> 45 </ul> 46 </div>
css3样式：
1 * { 2 margin: 0px; 3 padding: 0px; 4 } 5 6 .nav { 7 position: relative; 8 width: 994px; 9 height: 52px; 10 background: #404144; 11 margin: 0 auto; 12 } 13 14 .nav li { 15 list-style: none; 16 float: left; 17 line-height: 50px; 18 } 19 20 .nav li a { 21 display: block; 22 text-decoration: none; 23 color: #FFFFFF; 24 padding: 0px 15px; 25 font-family: "微软雅黑"; 26 } 27 28 .nav li a:hover .xs { 29 display: block; 30 } 31 32 .nav li a:hover { 33 background: #333333; 34 } 35 36 .nav li a .xs { 37 border: 1px solid #cccccc; 38 border-top: none; 39 display: none; 40 width: 992px; 41 background: #FFFFFF; 42 position: absolute; 43 top: 50px; 44 left: 0px; 45 } 46 47 .nav li a .xs .xiao { 48 position: absolute; 49 top: -8px; 50 border-left: 8px solid transparent; 51 border-right: 8px solid transparent; 52 border-bottom: 8px solid #FFFFFF; 53 width: 0px; 54 height: 0px; 55 z-index: 999; 56 } 57 58 .nav li:nth-child(1) .xiao { 59 left: 20px; 60 } 61 62 .nav li:nth-child(2) .xiao { 63 left: 98px; 64 } 65 66 .nav li:nth-child(3) .xiao { 67 left: 177px; 68 } 69 70 .nav li:nth-child(4) .xiao { 71 left: 255px; 72 } 73 74 .nav li:nth-child(5) .xiao { 75 left: 348px; 76 } 77 78 .nav li:nth-child(6) .xiao { 79 left: 427px; 80 } 81 82 .nav li:nth-child(7) .xiao { 83 left: 496px; 84 } 85 86 .nav li:nth-child(8) .xiao { 87 left: 576px; 88 } 89 90 .nav li:nth-child(9) .xiao { 91 left: 646px; 92 } 93 94 .nav li:nth-child(10) .xiao { 95 left: 706px; 96 }
