效果：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
推荐：http://www.cnblogs.com/roucheng/p/cssdaohang.html
网页特效：http://www.cnblogs.com/roucheng/p/texiao.html
时间： 2024-10-12 12:58:28