ホームページ >ウェブフロントエンド >htmlチュートリアル >Xiaomi.com CSS3 ナビゲーション ドロップダウン メニュー code_html/css_WEB-ITnose
Xiaomi.com CSS3 ナビゲーション ドロップダウン メニュー code_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:19:051135ブラウズ
効果: 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
おすすめ:
ウェブページの特殊効果:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。