小米网css3导航下拉菜单代码 - roucheng

程序员文章站 2022-04-26 07:55:30

...

效果：http://hovertree.com/texiao/css3/19/

代码如下：

  1 doctype html>
  2 
  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>