1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>CSS样式三级下拉菜单</title>
6 <style>
7 @charset "utf-8";
8 body{margin:0px; padding:0px; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#FFF; background:url(/jscss/demoimg/201303/tittlePicture.png) no-repeat;}
9 body a{color:#FFF;}
10 .box{margin:240px auto; padding:0px; width:1000px;}
11 .box ul{margin:0px; padding:0px; list-style:none;}
12 .box ul li{margin:0px 2px 0px 0px; padding:0px; width:120px; height:35px; display:inline; float:left; background:url(/jscss/demoimg/201303/zk.png) no-repeat 0 0; border-radius:4px; box-shadow:#000 0px 0px 1px;}
13 .box ul li:hover ul{display:block;}
14 .box ul li a{text-align:center; width:121px; height:37px; line-height:35px; display:block; text-decoration:none;}
15 .box ul li ul{display:none;}
16 .box ul li ul li{margin:0px 0px 2px 0px; padding:0px; background:url(/jscss/demoimg/201303/zkTwo.png) no-repeat;}
17 .box ul li ul li:hover{background:#666;}
18 .box ul li ul li:hover ul{visibility:visible;}
19 .box ul li ul li ul{visibility:hidden; position:relative; top:-37px; left:121px;}
20 .box ul li ul li ul li{background:#000;}
21 </style>
22 </head>
23 <body>
24 <div class="box">
25 <ul>
26 <li><a href="#">源码爱好者</a>
27 <ul>
28 <li><a href="#">Two-level menu</a>
29 <ul>
30 <li><a href="#">Three-level menu</a></li>
31 <li><a href="#">Three-level menu</a></li>
32 <li><a href="#">Three-level menu</a></li>
33 <li><a href="#">Three-level menu</a></li>
34 </ul>
35 </li>
36 <li><a href="#">技术文章</a>
37 <ul>
38 <li><a href="#">Three-level menu</a></li>
39 <li><a href="#">Three-level menu</a></li>
40 <li><a href="#">Three-level menu</a></li>
41 <li><a href="#">Three-level menu</a></li>
42 </ul>
43 </li>
44 <li><a href="#">源码下载</a>
45 <ul>
46 <li><a href="#">Three-level menu</a></li>
47 <li><a href="#">Three-level menu</a></li>
48 <li><a href="#">Three-level menu</a></li>
49 <li><a href="#">Three-level menu</a></li>
50 </ul>
51 </li>
52 <li><a href="#">Two-level menu</a>
53 <ul>
54 <li><a href="#">Three-level menu</a></li>
55 <li><a href="#">Three-level menu</a></li>
56 <li><a href="#">Three-level menu</a></li>
57 <li><a href="#">Three-level menu</a></li>
58 </ul>
59 </li>
60 <li><a href="#">Two-level menu</a>
61 <ul>
62 <li><a href="#">Three-level menu</a></li>
63 <li><a href="#">Three-level menu</a></li>
64 <li><a href="#">Three-level menu</a></li>
65 <li><a href="#">Three-level menu</a></li>
66 </ul>
67 </li>
68 </ul>
69 </li>
70 <li><a href="#">广告联系</a>
71 <ul>
72 <li><a href="#">Two-level menu</a>
73 <ul>
74 <li><a href="#">Three-level menu</a></li>
75 <li><a href="#">Three-level menu</a></li>
76 <li><a href="#">Three-level menu</a></li>
77 <li><a href="#">Three-level menu</a></li>
78 </ul>
79 </li>
80 <li><a href="#">Two-level menu</a>
81 <ul>
82 <li><a href="#">Three-level menu</a></li>
83 <li><a href="#">Three-level menu</a></li>
84 <li><a href="#">Three-level menu</a></li>
85 <li><a href="#">Three-level menu</a></li>
86 </ul>
87 </li>
88 <li><a href="#">Two-level menu</a>
89 <ul>
90 <li><a href="#">Three-level menu</a></li>
91 <li><a href="#">Three-level menu</a></li>
92 <li><a href="#">Three-level menu</a></li>
93 <li><a href="#">Three-level menu</a></li>
94 </ul>
95 </li>
96 <li><a href="#">Two-level menu</a>
97 <ul>
98 <li><a href="#">Three-level menu</a></li>
99 <li><a href="#">Three-level menu</a></li>
100 <li><a href="#">Three-level menu</a></li>
101 <li><a href="#">Three-level menu</a></li>
102 </ul>
103 </li>
104 <li><a href="#">Two-level menu</a>
105 <ul>
106 <li><a href="#">Three-level menu</a></li>
107 <li><a href="#">Three-level menu</a></li>
108 <li><a href="#">Three-level menu</a></li>
109 <li><a href="#">Three-level menu</a></li>
110 </ul>
111 </li>
112 </ul>
113 </li>
114 <li><a href="#">最新更新</a>
115 <ul>
116 <li><a href="#">Two-level menu</a>
117 <ul>
118 <li><a href="#">Three-level menu</a></li>
119 <li><a href="#">Three-level menu</a></li>
120 <li><a href="#">Three-level menu</a></li>
121 <li><a href="#">Three-level menu</a></li>
122 </ul>
123 </li>
124 <li><a href="#">Two-level menu</a>
125 <ul>
126 <li><a href="#">Three-level menu</a></li>
127 <li><a href="#">Three-level menu</a></li>
128 <li><a href="#">Three-level menu</a></li>
129 <li><a href="#">Three-level menu</a></li>
130 </ul>
131 </li>
132 <li><a href="#">Two-level menu</a>
133 <ul>
134 <li><a href="#">Three-level menu</a></li>
135 <li><a href="#">Three-level menu</a></li>
136 <li><a href="#">Three-level menu</a></li>
137 <li><a href="#">Three-level menu</a></li>
138 </ul>
139 </li>
140 <li><a href="#">Two-level menu</a>
141 <ul>
142 <li><a href="#">Three-level menu</a></li>
143 <li><a href="#">Three-level menu</a></li>
144 <li><a href="#">Three-level menu</a></li>
145 <li><a href="#">Three-level menu</a></li>
146 </ul>
147 </li>
148 <li><a href="#">Two-level menu</a>
149 <ul>
150 <li><a href="#">Three-level menu</a></li>
151 <li><a href="#">Three-level menu</a></li>
152 <li><a href="#">Three-level menu</a></li>
153 <li><a href="#">Three-level menu</a></li>
154 </ul>
155 </li>
156 </ul>
157 </li>
158 <li><a href="#">源代码下载</a>
159 <ul>
160 <li><a href="#">Two-level menu</a>
161 <ul>
162 <li><a href="#">Three-level menu</a></li>
163 <li><a href="#">Three-level menu</a></li>
164 <li><a href="#">Three-level menu</a></li>
165 <li><a href="#">Three-level menu</a></li>
166 </ul>
167 </li>
168 <li><a href="#">Two-level menu</a>
169 <ul>
170 <li><a href="#">Three-level menu</a></li>
171 <li><a href="#">Three-level menu</a></li>
172 <li><a href="#">Three-level menu</a></li>
173 <li><a href="#">Three-level menu</a></li>
174 </ul>
175 </li>
176 <li><a href="#">Two-level menu</a>
177 <ul>
178 <li><a href="#">Three-level menu</a></li>
179 <li><a href="#">Three-level menu</a></li>
180 <li><a href="#">Three-level menu</a></li>
181 <li><a href="#">Three-level menu</a></li>
182 </ul>
183 </li>
184 <li><a href="#">Two-level menu</a>
185 <ul>
186 <li><a href="#">Three-level menu</a></li>
187 <li><a href="#">Three-level menu</a></li>
188 <li><a href="#">Three-level menu</a></li>
189 <li><a href="#">Three-level menu</a></li>
190 </ul>
191 </li>
192 <li><a href="#">Two-level menu</a>
193 <ul>
194 <li><a href="#">Three-level menu</a></li>
195 <li><a href="#">Three-level menu</a></li>
196 <li><a href="#">Three-level menu</a></li>
197 <li><a href="#">Three-level menu</a></li>
198 </ul>
199 </li>
200 </ul>
201 </li>
202 <li><a href="#">编程技巧</a>
203 <ul>
204 <li><a href="#">Two-level menu</a>
205 <ul>
206 <li><a href="#">Three-level menu</a></li>
207 <li><a href="#">Three-level menu</a></li>
208 <li><a href="#">Three-level menu</a></li>
209 <li><a href="#">Three-level menu</a></li>
210 </ul>
211 </li>
212 <li><a href="#">Two-level menu</a>
213 <ul>
214 <li><a href="#">Three-level menu</a></li>
215 <li><a href="#">Three-level menu</a></li>
216 <li><a href="#">Three-level menu</a></li>
217 <li><a href="#">Three-level menu</a></li>
218 </ul>
219 </li>
220 <li><a href="#">Two-level menu</a>
221 <ul>
222 <li><a href="#">Three-level menu</a></li>
223 <li><a href="#">Three-level menu</a></li>
224 <li><a href="#">Three-level menu</a></li>
225 <li><a href="#">Three-level menu</a></li>
226 </ul>
227 </li>
228 <li><a href="#">Two-level menu</a>
229 <ul>
230 <li><a href="#">Three-level menu</a></li>
231 <li><a href="#">Three-level menu</a></li>
232 <li><a href="#">Three-level menu</a></li>
233 <li><a href="#">Three-level menu</a></li>
234 </ul>
235 </li>
236 <li><a href="#">Two-level menu</a>
237 <ul>
238 <li><a href="#">Three-level menu</a></li>
239 <li><a href="#">Three-level menu</a></li>
240 <li><a href="#">Three-level menu</a></li>
241 <li><a href="#">Three-level menu</a></li>
242 </ul>
243 </li>
244 </ul>
245 </li>
246 <li><a href="/dll">编程控件</a>
247 <ul>
248 <li><a href="#">Two-level menu</a>
249 <ul>
250 <li><a href="#">Three-level menu</a></li>
251 <li><a href="#">Three-level menu</a></li>
252 <li><a href="#">Three-level menu</a></li>
253 <li><a href="#">Three-level menu</a></li>
254 </ul>
255 </li>
256 <li><a href="#">Two-level menu</a>
257 <ul>
258 <li><a href="#">Three-level menu</a></li>
259 <li><a href="#">Three-level menu</a></li>
260 <li><a href="#">Three-level menu</a></li>
261 <li><a href="#">Three-level menu</a></li>
262 </ul>
263 </li>
264 <li><a href="#">Two-level menu</a>
265 <ul>
266 <li><a href="#">Three-level menu</a></li>
267 <li><a href="#">Three-level menu</a></li>
268 <li><a href="#">Three-level menu</a></li>
269 <li><a href="#">Three-level menu</a></li>
270 </ul>
271 </li>
272 <li><a href="#">电子书籍</a>
273 <ul>
274 <li><a href="#">Three-level menu</a></li>
275 <li><a href="#">Three-level menu</a></li>
276 <li><a href="#">Three-level menu</a></li>
277 <li><a href="#">Three-level menu</a></li>
278 </ul>
279 </li>
280 <li><a href="#">Two-level menu</a>
281 <ul>
282 <li><a href="#">Three-level menu</a></li>
283 <li><a href="#">Three-level menu</a></li>
284 <li><a href="#">Three-level menu</a></li>
285 <li><a href="#">Three-level menu</a></li>
286 </ul>
287 </li>
288 </ul>
289 </li>
290 <li><a href="#">网页特效</a>
291 <ul>
292 <li><a href="#">Two-level menu</a>
293 <ul>
294 <li><a href="#">Three-level menu</a></li>
295 <li><a href="#">Three-level menu</a></li>
296 <li><a href="#">Three-level menu</a></li>
297 <li><a href="#">Three-level menu</a></li>
298 </ul>
299 </li>
300 <li><a href="#">Two-level menu</a>
301 <ul>
302 <li><a href="#">Three-level menu</a></li>
303 <li><a href="#">Three-level menu</a></li>
304 <li><a href="#">Three-level menu</a></li>
305 <li><a href="#">Three-level menu</a></li>
306 </ul>
307 </li>
308 <li><a href="#">Two-level menu</a>
309 <ul>
310 <li><a href="#">Three-level menu</a></li>
311 <li><a href="#">Three-level menu</a></li>
312 <li><a href="#">Three-level menu</a></li>
313 <li><a href="#">Three-level menu</a></li>
314 </ul>
315 </li>
316 <li><a href="#">Two-level menu</a>
317 <ul>
318 <li><a href="#">Three-level menu</a></li>
319 <li><a href="#">Three-level menu</a></li>
320 <li><a href="#">Three-level menu</a></li>
321 <li><a href="#">Three-level menu</a></li>
322 </ul>
323 </li>
324 <li><a href="#">Two-level menu</a>
325 <ul>
326 <li><a href="#">Three-level menu</a></li>
327 <li><a href="#">Three-level menu</a></li>
328 <li><a href="#">Three-level menu</a></li>
329 <li><a href="#">Three-level menu</a></li>
330 </ul>
331 </li>
332 </ul>
333 </li>
334 </ul>
335 </div>
336 </body>
337 </html>
