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 <title>【荐】JS+CSS全力打造的一级横向滑动，二级竖向下拉综合菜单_网页代码站(www.webdm.cn)</title>
5 <style type="text/css">
6 <!--
7 body,ul,ol,li,dl,dt,dd,h1{ margin:0; padding:0; list-style:none;}
8 body { font:12px "Arial","宋体";color:#333;background:#FFF;}
9 a{border:none; text-decoration:none;}
10 #menu { 980px; margin:30px auto;}
11 #menu dl { padding-left:10px; height:30px;overflow:hidden; }
12 #menu dl dd { float:left; padding-right:5px;}
13 #menu dl dd a {display:block; padding-left:10px; background:url("http://www.webdm.cn/images/20110110/menu.gif") no-repeat 0 -60px;}
14 #menu dl dd a span {
15 display:block;
16 color:#630;
17 50px;
18 height:30px;
19 text-align:center;
20 line-height:34px;
21 font-size:14px;
22 padding-right:10px;
23 background:url("http://www.webdm.cn/images/20110110/menu.gif") no-repeat right -60px;
24 overflow:hidden;
25 }
26 #menu dl dd a:hover,
27 #menu dl dd.ok a { background-position: 0 -90px;}
28 #menu dl dd a:hover span,
29 #menu dl dd.ok a span { cursor:pointer; font-weight:bold; color:#FFF;background-position: right -90px;}
30
31 #menu ol {clear:both; height:30px; background:url("http://www.webdm.cn/images/20110110/menu.gif") repeat-x 0 0;}
32 #menu ol li { float:left;}
33 #menu ol li a { color:#FFF; display:block; 70px; text-align:center; height:30px; line-height:32px; overflow:hidden;}
34 #menu ol li a:hover,
35 #menu ol li.ok a,
36 #menu ol li.ol a{ font-weight:bold; background:url("http://www.webdm.cn/images/20110110/menu.gif") no-repeat 0 -30px;}
37
38 #menu ol li span { 150px;position:absolute;background-color:#FEFEFE;}
39 #menu ol li span h1 {font:12px "宋体"; float:none; display:block; background-color:#E6E6E6;}
40 #menu ol li span h1 a,
41 #menu ol li.ok span h1 a,
42 #menu ol li.ok span ul a{
43 color:#333;
44 148px;
45 text-indent:10px;
46 height:24px;
47 line-height:26px;
48 text-align:left;
49 font-weight:normal;
50 border-top:#FFF 1px solid;
51 border-bottom:#A0A0A0 1px solid;
52 border-right:#A0A0A0 1px solid;
53 background-image:none;
54 }
55 #menu ol li span h1 a:hover,
56 #menu ol li span h1.ok a {color:#930; font-weight:bold; background-image:none; background-color:#D9D9D9;}
57 #menu ol li.ok span ul {147px; border:#E6E6E6 1px solid; border-top:none;overflow:hidden;}
58 #menu ol li.ok span ul a {border:none;}
59 #menu ol li.ok span ul a:hover { color:#930; font-weight:bold; text-indent:15px; background-image:none;}
60 .no,.ol span { display:none;}
61 -->
62 </style>
63 <script language="javascript">
64 <!--//
65 function ShowMenu(obj,n){
66 var dd = obj.parentNode.getElementsByTagName("dd");
67 for(var i=0;i<dd.length;i++){dd[i].className = "";}
68 dd[n].className = "ok";
69 var ol = document.getElementById("menu").getElementsByTagName("ol");
70 for(var i=0;i<ol.length;i++){ol[i].className = "no";}
71 ol[n].className = "";
72 }
73 function ShowSpan(obj,n){
74 var span = obj.parentNode.getElementsByTagName("span");
75 for(var i=0;i<span.length;i++){span[i].className = "no";}
76 span[n].className = "";
77 var li = obj.parentNode.getElementsByTagName("li")
78 li[n].className = "ok";
79 for(var i=0;i<li.length;i++){
80 if(i!=n){li[i].className = "";}
81 li[i].onmouseout = function(){this.className = "ol";}
82 }
83 }
84 function ShowUl(obj,n){
85 var ul = obj.parentNode.getElementsByTagName("ul");
86 var h1 = obj.parentNode.getElementsByTagName("h1");
87 for(var i=0; i<h1.length;i++){
88 h1[i].innerHTML = h1[i].innerHTML.replace("-","+");
89 h1[i].className = "";
90 }
91 if(ul[n].className == "no"){
92 ul[n].className = "";
93 obj.className = "ok";
94 obj.innerHTML = obj.innerHTML.replace("+","-");
95 }else{
96 ul[n].className = "no";
97 return;
98 }
99 for(var i=0; i<ul.length;i++){if(i!=n){ ul[i].className = "no";}}
100 }
101 //-->
102 </script>
103 </head>
104 <body>
105 <div id="menu">
106 <dl>
107 <dd class="ok" onmouseover="javascript:ShowMenu(this,0);"><a href="javascript:void(0);"><span>菜单A</span></a></dd>
108 <dd onmouseover="javascript:ShowMenu(this,1);"><a href="javascript:void(0);"><span>菜单B</span></a></dd>
109 <dd onmouseover="javascript:ShowMenu(this,2);"><a href="javascript:void(0);"><span>菜单C</span></a></dd>
110 </dl>
111
112 <ol>
113 <li onmouseover="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单A_0</a>
114 <span class="no">
115 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_0_0</a></h1>
116 <ul>
117 <a href="javascript:void(0);">菜单A_0_0_0</a>
118 <a href="javascript:void(0);">菜单A_0_0_1</a>
119 </ul>
120 <h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_0_1</a></h1>
121 <ul class="no">
122 <a href="javascript:void(0);">菜单A_0_1_0</a>
123 <a href="javascript:void(0);">菜单A_0_1_1</a>
124 <a href="javascript:void(0);">菜单A_0_1_2</a>
125 </ul>
126 </span>
127 </li>
128 <li onmouseover="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单A_1</a>
129 <span class="no">
130 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_1_0</a></h1>
131 <ul>
132 <a href="javascript:void(0);">菜单A_1_0_0</a>
133 <a href="javascript:void(0);">菜单A_1_0_1</a>
134 </ul>
135 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_1_1</a></h1>
136 <ul class="no">
137 <a href="javascript:void(0);">菜单A_1_1_0</a>
138 <a href="javascript:void(0);">菜单A_1_1_1</a>
139 <a href="javascript:void(0);">菜单A_1_1_2</a>
140 </ul>
141 </span>
142 </li>
143 <li onmouseover="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单A_2</a>
144 <span class="no">
145 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_2_0</a></h1>
146 <ul>
147 <a href="javascript:void(0);">菜单A_2_0_0</a>
148 <a href="javascript:void(0);">菜单A_2_0_1</a>
149 <a href="javascript:void(0);">菜单A_2_0_2</a>
150 </ul>
151 <h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_2_1</a></h1>
152 <ul class="no">
153 <a href="javascript:void(0);">菜单A_2_1_0</a>
154 <a href="javascript:void(0);">菜单A_2_1_1</a>
155 </ul>
156 </span>
157 </li>
158 <li onmouseover="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单A_3</a>
159 <span class="no">
160 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_3_0</a></h1>
161 <ul>
162 <a href="javascript:void(0);">菜单A_3_0_0</a>
163 <a href="javascript:void(0);">菜单A_3_0_1</a>
164 </ul>
165 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_3_1</a></h1>
166 <ul class="no">
167 <a href="javascript:void(0);">菜单A_3_1_0</a>
168 <a href="javascript:void(0);">菜单A_3_1_1</a>
169 </ul>
170 </span>
171 </li>
172 <li onmouseover="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单A_4</a>
173 <span class="no">
174 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_4_0</a></h1>
175 <ul>
176 <a href="javascript:void(0);">菜单A_4_0_0</a>
177 <a href="javascript:void(0);">菜单A_4_0_1</a>
178 <a href="javascript:void(0);">菜单A_4_0_2</a>
179 </ul>
180 <h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_4_1</a></h1>
181 <ul class="no">
182 <a href="javascript:void(0);">菜单A_4_1_0</a>
183 <a href="javascript:void(0);">菜单A_4_1_1</a>
184 </ul>
185 </span>
186 </li>
187 <li onmouseover="javascript:ShowSpan(this,5);"><a href="javascript:void(0);">菜单A_5</a>
188 <span class="no">
189 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_5_0</a></h1>
190 <ul>
191 <a href="javascript:void(0);">菜单A_5_0_0</a>
192 <a href="javascript:void(0);">菜单A_5_0_1</a>
193 <a href="javascript:void(0);">菜单A_5_0_2</a>
194 </ul>
195 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_5_1</a></h1>
196 <ul class="no">
197 <a href="javascript:void(0);">菜单A_5_1_0</a>
198 </ul>
199 </span>
200 </li>
201 </ol>
202
203 <!-- ol 0 End -->
204
205 <ol class="no">
206 <li onmouseover="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单B_0</a>
207 <span class="no">
208 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_0_0</a></h1>
209 <ul>
210 <a href="javascript:void(0);">菜单B_0_0_0</a>
211 <a href="javascript:void(0);">菜单B_0_0_1</a>
212 </ul>
213 <h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_0_1</a></h1>
214 <ul class="no">
215 <a href="javascript:void(0);">菜单B_0_1_0</a>
216 <a href="javascript:void(0);">菜单B_0_1_1</a>
217 <a href="javascript:void(0);">菜单B_0_1_2</a>
218 <a href="javascript:void(0);">菜单B_0_1_3</a>
219 </ul>
220 </span>
221 </li>
222 <li onmouseover="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单B_1</a>
223 <span class="no">
224 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_1_0</a></h1>
225 <ul>
226 <a href="javascript:void(0);">菜单B_1_0_0</a>
227 <a href="javascript:void(0);">菜单B_1_0_1</a>
228 </ul>
229 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_1_1</a></h1>
230 <ul class="no">
231 <a href="javascript:void(0);">菜单B_1_1_0</a>
232 <a href="javascript:void(0);">菜单B_1_1_1</a>
233 <a href="javascript:void(0);">菜单B_1_1_2</a>
234 </ul>
235 </span>
236 </li>
237 <li onmouseover="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单B_2</a>
238 <span class="no">
239 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_2_0</a></h1>
240 <ul>
241 <a href="javascript:void(0);">菜单B_2_0_0</a>
242 <a href="javascript:void(0);">菜单B_2_0_1</a>
243 </ul>
244 <h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_2_1</a></h1>
245 <ul class="no">
246 <a href="javascript:void(0);">菜单B_2_1_0</a>
247 </ul>
248 </span>
249 </li>
250 <li onmouseover="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单B_3</a>
251 <span class="no">
252 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_3_0</a></h1>
253 <ul>
254 <a href="javascript:void(0);">菜单B_3_0_0</a>
255 <a href="javascript:void(0);">菜单B_3_0_1</a>
256 <a href="javascript:void(0);">菜单B_3_0_2</a>
257 </ul>
258 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_3_1</a></h1>
259 <ul class="no">
260 <a href="javascript:void(0);">菜单B_3_1_0</a>
261 <a href="javascript:void(0);">菜单B_3_1_1</a>
262 </ul>
263 </span>
264 </li>
265 <li onmouseover="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单B_4</a>
266 <span class="no">
267 <h1 class="ok" onclick="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_4_0</a></h1>
268 <ul>
269 <a href="javascript:void(0);">菜单B_4_0_0</a>
270 <a href="javascript:void(0);">菜单B_4_0_1</a>
271 <a href="javascript:void(0);">菜单B_4_0_2</a>
272 <a href="javascript:void(0);">菜单B_4_0_3</a>
273 </ul>
274 <h1 onclick ="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_4_1</a></h1>
275 <ul class="no">
276 <a href="javascript:void(0);">菜单B_4_1_0</a>
277 <a href="javascript:void(0);">菜单B_4_1_1</a>
278 </ul>
279 </span>
280 </li>
281 <li onmouseover="javascript:ShowSpan(this,5);"><a href="javascript:void(0);">菜单B_5</a>
282 <span class="no">
283 <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单B_5_0</a></h1>
284 <ul>
285 <a href="javascript:void(0);">菜单B_5_0_0</a>
286 <a href="javascript:void(0);">菜单B_5_0_1</a>
287 </ul>
288 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单B_5_1</a></h1>
289 <ul class="no">
290 <a href="javascript:void(0);">菜单B_5_1_0</a>
291 <a href="javascript:void(0);">菜单B_5_1_1</a>
292 </ul>
293 </span>
294 </li>
295 </ol>
296
297 <!-- ol 1 End -->
298
299 <ol class="no">
300 <li onmouseover="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单C_0</a>
301 <span class="no">
302 <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_0_0</a></h1>
303 <ul>
304 <a href="javascript:void(0);">菜单C_0_0_0</a>
305 <a href="javascript:void(0);">菜单C_0_0_1</a>
306 <a href="javascript:void(0);">菜单C_0_0_2</a>
307 </ul>
308 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_0_1</a></h1>
309 <ul class="no">
310 <a href="javascript:void(0);">菜单C_0_1_0</a>
311 <a href="javascript:void(0);">菜单C_0_1_1</a>
312 <a href="javascript:void(0);">菜单C_0_1_2</a>
313 </ul>
314 </span>
315 </li>
316 <li onmouseover="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单C_1</a>
317 <span class="no">
318 <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_1_0</a></h1>
319 <ul>
320 <a href="javascript:void(0);">菜单C_1_0_0</a>
321 <a href="javascript:void(0);">菜单C_1_0_1</a>
322 </ul>
323 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_1_1</a></h1>
324 <ul class="no">
325 <a href="javascript:void(0);">菜单C_1_1_0</a>
326 <a href="javascript:void(0);">菜单C_1_1_1</a>
327 <a href="javascript:void(0);">菜单C_1_1_2</a>
328 </ul>
329 </span>
330 </li>
331 <li onmouseover="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单C_2</a>
332 <span class="no">
333 <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_2_0</a></h1>
334 <ul>
335 <a href="javascript:void(0);">菜单C_2_0_0</a>
336 <a href="javascript:void(0);">菜单C_2_0_1</a>
337 <a href="javascript:void(0);">菜单C_2_0_3</a>
338 </ul>
339 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_2_1</a></h1>
340 <ul class="no">
341 <a href="javascript:void(0);">菜单C_2_1_0</a>
342 <a href="javascript:void(0);">菜单C_2_1_3</a>
343 </ul>
344 </span>
345 </li>
346 <li onmouseover="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单C_3</a>
347 <span class="no">
348 <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_3_0</a></h1>
349 <ul>
350 <a href="javascript:void(0);">菜单C_3_0_0</a>
351 <a href="javascript:void(0);">菜单C_3_0_1</a>
352 <a href="javascript:void(0);">菜单C_3_0_3</a>
353 </ul>
354 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_3_1</a></h1>
355 <ul class="no">
356 <a href="javascript:void(0);">菜单C_3_1_0</a>
357 <a href="javascript:void(0);">菜单C_3_1_3</a>
358 </ul>
359 </span>
360 </li>
361 <li onmouseover="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单C_4</a>
362 <span class="no">
363 <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单C_4_0</a></h1>
364 <ul>
365 <a href="javascript:void(0);">菜单C_4_0_0</a>
366 <a href="javascript:void(0);">菜单C_4_0_1</a>
367 <a href="javascript:void(0);">菜单C_4_0_3</a>
368 </ul>
369 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单C_4_1</a></h1>
370 <ul class="no">
371 <a href="javascript:void(0);">菜单C_4_1_0</a>
372 <a href="javascript:void(0);">菜单C_4_1_1</a>
373 <a href="javascript:void(0);">菜单C_4_1_2</a>
374 </ul>
375 </span>
376 </li>
377 <li onmouseover="javascript:ShowSpan(this,5);"><a href="javascript:void(0);">菜单A_5</a>
378 <span class="no">
379 <h1 class="ok" onclick ="javascript:ShowUl(this,0)"><a href="javascript:void(0);"> - 菜单A_5_0</a></h1>
380 <ul>
381 <a href="javascript:void(0);">菜单A_5_0_0</a>
382 <a href="javascript:void(0);">菜单A_5_0_3</a>
383 </ul>
384 <h1 onclick="javascript:ShowUl(this,1)"><a href="javascript:void(0);"> + 菜单A_5_1</a></h1>
385 <ul class="no">
386 <a href="javascript:void(0);">菜单A_5_1_0</a>
387 <a href="javascript:void(0);">菜单A_5_1_3</a>
388 </ul>
389 </span>
390 </li>
391 </ol>
392 </div>
393 <br />
394 <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
395 </body>
396 </html>
View Code
