![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 { width: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 width: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; width: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 { width: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 width: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 {width: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" οnmοuseοver="javascript:ShowMenu(this,0);"><a href="javascript:void(0);"><span>菜单A</span></a></dd> 108 <dd οnmοuseοver="javascript:ShowMenu(this,1);"><a href="javascript:void(0);"><span>菜单B</span></a></dd> 109 <dd οnmοuseοver="javascript:ShowMenu(this,2);"><a href="javascript:void(0);"><span>菜单C</span></a></dd> 110 </dl> 111 112 <ol> 113 <li οnmοuseοver="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单A_0</a> 114 <span class="no"> 115 <h1 class="ok" οnclick="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 οnmοuseοver="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单A_1</a> 129 <span class="no"> 130 <h1 class="ok" οnclick="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 οnclick="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 οnmοuseοver="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单A_2</a> 144 <span class="no"> 145 <h1 class="ok" οnclick="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 οnmοuseοver="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单A_3</a> 159 <span class="no"> 160 <h1 class="ok" οnclick="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 οnclick="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 οnmοuseοver="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单A_4</a> 173 <span class="no"> 174 <h1 class="ok" οnclick="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 οnmοuseοver="javascript:ShowSpan(this,5);"><a href="javascript:void(0);">菜单A_5</a> 188 <span class="no"> 189 <h1 class="ok" οnclick="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 οnclick="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 οnmοuseοver="javascript:ShowSpan(this,0);"><a href="javascript:void(0);">菜单B_0</a> 207 <span class="no"> 208 <h1 class="ok" οnclick="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 οnmοuseοver="javascript:ShowSpan(this,1);"><a href="javascript:void(0);">菜单B_1</a> 223 <span class="no"> 224 <h1 class="ok" οnclick="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 οnclick="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 οnmοuseοver="javascript:ShowSpan(this,2);"><a href="javascript:void(0);">菜单B_2</a> 238 <span class="no"> 239 <h1 class="ok" οnclick="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 οnmοuseοver="javascript:ShowSpan(this,3);"><a href="javascript:void(0);">菜单B_3</a> 251 <span class="no"> 252 <h1 class="ok" οnclick="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 οnclick="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 οnmοuseοver="javascript:ShowSpan(this,4);"><a href="javascript:void(0);">菜单B_4</a> 266 <span class="no"> 267 <h1 class="ok" οnclick="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 οnmοuseοver="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 οnclick="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 οnmοuseοver="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 οnclick="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 οnmοuseοver="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 οnclick="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 οnmοuseοver="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 οnclick="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 οnmοuseοver="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 οnclick="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 οnmοuseοver="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 οnclick="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 οnmοuseοver="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 οnclick="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>