兼容性好-导航
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>CSS+JS实现兼容性很好的无限级下拉菜单</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 border: 0; 12 } 13 14 body { 15 font: 12px/130% verdana, geneva, arial, helvetica, sans-serif, 宋体; 16 } 17 18 li { 19 list-style: none; 20 } 21 22 .clearfix:after { 23 content: " "; 24 display: block; 25 height: 0; 26 clear: both; 27 visibility: hidden; 28 } 29 30 .clearfix { 31 display: inline-block; 32 } 33 34 a:link { 35 color: #000; 36 text-decoration: none; 37 } 38 39 a:visited { 40 color: #000; 41 text-decoration: none; 42 } 43 44 a:hover { 45 color: #000; 46 text-decoration: none; 47 } 48 49 .menu { 50 width: 778px; 51 height: 26px; 52 background: #fff; 53 margin: 0 auto; 54 } 55 56 .menusel { 57 float: left; 58 width: 100px; 59 position: relative; 60 height: 25px; 61 background: #ddd; 62 line-height: 25px; 63 margin-left: 1px; 64 *margin-left: 0px; 65 _margin-left: -1px; 66 } 67 68 .menusel h2 { 69 font-size: 12px; 70 } 71 72 .menusel a { 73 display: block; 74 text-align: center; 75 width: 100px; 76 border: 1px solid #a4a4a4; 77 height: 25px; 78 border-bottom: 1px solid #a4a4a4; 79 position: relative; 80 z-index: 2; 81 } 82 83 .menusel a:hover { 84 border: 1px solid #a4a4a4; 85 border-bottom: 1px dashed #eeeeee; 86 position: relative; 87 z-index: 2; 88 height: 25px; 89 } 90 91 .ahover a { 92 border-bottom: 1px dashed #eeeeee; 93 background: #eeeeee; 94 } 95 96 .position { 97 position: absolute; 98 z-index: 1; 99 } 100 101 .menusel ul { 102 width: 125px; 103 background: #eee; 104 border: 1px solid #a4a4a4; 105 margin-top: -1px; 106 position: relative; 107 z-index: 1; 108 display: none; 109 } 110 111 .menusel .block { 112 display: block; 113 } 114 115 .typeul li { 116 border-bottom: 1px dashed #a4a4a4; 117 width: 125px; 118 position: relative; 119 float: left; 120 } 121 122 .typeul li a { 123 border: none; 124 width: 125px; 125 } 126 127 .typeul li a:hover { 128 border: none; 129 background: #ddd; 130 } 131 132 .typeul { 133 margin-left: 0; 134 } 135 136 .typeul ul { 137 left: 125px; 138 top: 0; 139 position: absolute; 140 } 141 142 .fli { 143 margin-left: -1px; 144 border-left: #eeeeee solid 1px; 145 } 146 147 .menusel .lli { 148 border: none; 149 } 150 </style> 151 <script type="text/javascript"> 152 document.execCommand("BackgroundImageCache", false, true); 153 </script> 154 <!-- IE6背景图片闪烁问题 --> 155 </head> 156 157 <body> 158 <div class="menu"> 159 <div id="menu1" class="menusel"> 160 <h2><a href="/">菜单1</a></h2> 161 <div class="position"> 162 <ul class="clearfix typeul"> 163 <li> 164 <a href="http://www.jb51.net">菜单选项1-2</a> 165 </li> 166 <li> 167 <a href="#">菜单选项1-2</a> 168 <ul> 169 <li class="fli"> 170 <a href="#">菜单选项1-2-1</a> 171 </li> 172 <li class="lli"> 173 <a href="#">菜单选项1-2-2</a> 174 </li> 175 </ul> 176 </li> 177 <li> 178 <a href="http://www.jb51.net">菜单选项1-2</a> 179 </li> 180 <li class="lli"> 181 <a href="#">菜单选项1-2</a> 182 </li> 183 </ul> 184 </div> 185 <!-- position --> 186 </div> 187 <!-- menusel --> 188 <div id="menu2" class="menusel"> 189 <h2><a href="#">菜单2</a></h2> 190 <div class="position"> 191 <ul class="clearfix typeul"> 192 <li> 193 <a href="#">菜单选项2-2</a> 194 </li> 195 <li> 196 <a href="#">菜单选项2-2</a> 197 <ul> 198 <li class="fli"> 199 <a href="#">菜单选项2-2-1</a> 200 </li> 201 <li class="lli"> 202 <a href="#">菜单选项2-2-2</a> 203 <ul> 204 <li class="fli"> 205 <a href="#">菜单选项2-2-1</a> 206 </li> 207 <li class="lli"> 208 <a href="#">菜单选项2-2-2</a> 209 </li> 210 </ul> 211 </li> 212 </ul> 213 </li> 214 <li> 215 <a href="#">菜单选项2-2</a> 216 </li> 217 <li class="lli"> 218 <a href="#">菜单选项2-2</a> 219 </li> 220 </ul> 221 </div> 222 <!-- position --> 223 </div> 224 <!-- menusel --> 225 <div id="menu3" class="menusel"> 226 <h2><a href="#">菜单3</a></h2> 227 <div class="position"> 228 <ul class="clearfix typeul"> 229 <li> 230 <a href="#">菜单选项3-2</a> 231 </li> 232 <li> 233 <a href="#">菜单选项3-2</a> 234 <ul> 235 <li class="fli"> 236 <a href="#">菜单选项3-2-1</a> 237 </li> 238 <li class="lli"> 239 <a href="#">菜单选项3-2-2</a> 240 <ul> 241 <li class="fli"> 242 <a href="#">菜单选项3-2-1</a> 243 </li> 244 <li class="lli"> 245 <a href="#">菜单选项3-2-2</a> 246 <ul> 247 <li class="fli"> 248 <a href="#">菜单选项3-2-1</a> 249 </li> 250 <li class="lli"> 251 <a href="#">菜单选项3-2-2</a> 252 </li> 253 </ul> 254 </li> 255 </ul> 256 </li> 257 </ul> 258 </li> 259 <li> 260 <a href="#">菜单选项3-2</a> 261 </li> 262 <li class="lli"> 263 <a href="#">菜单选项3-2</a> 264 </li> 265 </ul> 266 </div> 267 <!-- position --> 268 </div> 269 <!-- menusel --> 270 </div> 271 <!-- menu --> 272 <script type="text/javascript"> 273 for(var x = 1; x < 4; x++) { 274 var menuid = document.getElementById("menu" + x); 275 menuid.num = x; 276 type(); 277 } 278 279 function type() { 280 var menuh2 = menuid.getElementsByTagName("h2"); 281 var menuul = menuid.getElementsByTagName("ul"); 282 var menuli = menuul[0].getElementsByTagName("li"); 283 menuh2[0].onmouseover = show; 284 menuh2[0].onmouseout = unshow; 285 menuul[0].onmouseover = show; 286 menuul[0].onmouseout = unshow; 287 288 function show() { 289 menuul[0].className = "clearfix typeul block" 290 } 291 292 function unshow() { 293 menuul[0].className = "typeul" 294 } 295 for(var i = 0; i < menuli.length; i++) { 296 menuli[i].num = i; 297 var liul = menuli[i].getElementsByTagName("ul")[0]; 298 if(liul) { 299 typeshow() 300 } 301 } 302 303 function typeshow() { 304 menuli[i].onmouseover = showul; 305 menuli[i].onmouseout = unshowul; 306 } 307 308 function showul() { 309 menuli[this.num].getElementsByTagName("ul")[0].className = "block"; 310 } 311 312 function unshowul() { 313 menuli[this.num].getElementsByTagName("ul")[0].className = ""; 314 } 315 } 316 </script> 317 </body> 318 319 </html>
效果：
