Heim >Web-Frontend >HTML-Tutorial >小米网css3导航下拉菜单代码_html/css_WEB-ITnose
小米网css3导航下拉菜单代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:19:051137Durchsuche
效果：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" / alt="小米网css3导航下拉菜单代码_html/css_WEB-ITnose" >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" / alt="小米网css3导航下拉菜单代码_html/css_WEB-ITnose" >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" / alt="小米网css3导航下拉菜单代码_html/css_WEB-ITnose" >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" / alt="小米网css3导航下拉菜单代码_html/css_WEB-ITnose" >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
推荐：
网页特效：
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：详解Bootstrap面板组件_html/css_WEB-ITnoseNächster Artikel：Golang 1.6: text/template内进行HTML/JavaScript/URL转义处理_html/css_WEB-ITnose