1 <html> 2 <head> 3 <title>树状列表结构测试</title> 4 <style type="text/css"> 5 * { 6 margin:0; 7 padding:0; 8 border:0; 9 } 10 body { 11 font:12px/130% verdana, geneva, arial, helvetica, sans-serif, 宋体; 12 } 13 li { 14 list-style:none; 15 } 16 .clearfix:after { 17 content:" "; 18 display:block; 19 height:0; 20 clear:both; 21 visibility:hidden; 22 } 23 .clearfix { 24 display:inline-block; 25 } 26 a:link { 27 color:#000; 28 text-decoration:none; 29 } 30 a:visited { 31 color:#000; 32 text-decoration:none; 33 } 34 a:hover { 35 color:#000; 36 text-decoration:none; 37 } 38 .menu { 39 width:778px; 40 height:26px; 41 background:#fff; 42 margin:0 auto; 43 } 44 .menusel { 45 float:left; 46 width:100px; 47 position:relative; 48 height:25px; 49 background:#ddd; 50 line-height: 25px; 51 margin-left: 1px; 52 *margin-left: 0px; 53 _margin-left: -1px; 54 } 55 .menusel h2 { 56 font-size:12px; 57 } 58 .menusel a { 59 display: block; 60 text-align:center; 61 width:100px; 62 border:1px solid #a4a4a4; 63 height:25px; 64 border-bottom:1px solid #a4a4a4; 65 position:relative; 66 z-index:2; 67 } 68 .menusel a:hover { 69 border:1px solid #a4a4a4; 70 border-bottom:1px dashed #eeeeee; 71 position:relative; 72 z-index:2; 73 height:25px; 74 } 75 .ahover a { 76 border-bottom:1px dashed #eeeeee; 77 background:#eeeeee; 78 } 79 .position { 80 position:absolute; 81 z-index:1; 82 } 83 .menusel ul { 84 width:125px; 85 background:#eee; 86 border:1px solid #a4a4a4; 87 margin-top: -1px; 88 position:relative; 89 z-index:1; 90 display:none; 91 } 92 .menusel .block { 93 display:block; 94 } 95 .typeul li { 96 border-bottom:1px dashed #a4a4a4; 97 width:125px; 98 position:relative; 99 float:left; 100 } 101 .typeul li a { 102 border:none; 103 width:125px; 104 } 105 .typeul li a:hover { 106 border:none; 107 background:#ddd; 108 } 109 .typeul { 110 margin-left:0; 111 } 112 .typeul ul { 113 left:125px; 114 top:0; 115 position:absolute; 116 } 117 .fli { 118 margin-left: -1px; 119 border-left:#eeeeee solid 1px; 120 } 121 .menusel .lli { 122 border:none; 123 } 124 </style> 125 <script type="text/javascript"> 126 document.execCommand("BackgroundImageCache", false, true); 127 </script> 128 <!-- IE6背景图片闪烁问题 --> 129 </head> 130 <body> 131 <div class="menu"> 132 <div id="menu1" class="menusel"> 133 <h2><a href="http://www.codefans.net/jscss/">菜单1</a></h2> 134 <div class="position"> 135 <ul class="clearfix typeul"> 136 <li><a href="#">菜单选项1-2</a></li> 137 <li> <a href="#">菜单选项1-2</a> 138 <ul> 139 <li class="fli"><a href="#">菜单选项1-2-1</a></li> 140 <li class="lli"><a href="#">菜单选项1-2-2</a></li> 141 </ul> 142 </li> 143 <li><a href="http://www.codefans.net">菜单选项1-2</a></li> 144 <li class="lli"><a href="#">菜单选项1-2</a></li> 145 </ul> 146 </div> 147 <!-- position --> 148 </div> 149 <!-- menusel --> 150 <div id="menu2" class="menusel"> 151 <h2><a href="#">菜单2</a></h2> 152 <div class="position"> 153 <ul class="clearfix typeul"> 154 <li><a href="#">菜单选项2-2</a></li> 155 <li><a href="#">菜单选项2-2</a> 156 <ul> 157 <li class="fli"><a href="#">菜单选项2-2-1</a></li> 158 <li class="lli"><a href="#">菜单选项2-2-2</a> 159 <ul> 160 <li class="fli"><a href="#">菜单选项2-2-1</a></li> 161 <li class="lli"><a href="#">菜单选项2-2-2</a> </li> 162 </ul> 163 </li> 164 </ul> 165 </li> 166 <li><a href="#">菜单选项2-2</a></li> 167 <li class="lli"><a href="#">菜单选项2-2</a></li> 168 </ul> 169 </div> 170 <!-- position --> 171 </div> 172 <!-- menusel --> 173 <div id="menu3" class="menusel"> 174 <h2><a href="#">菜单3</a></h2> 175 <div class="position"> 176 <ul class="clearfix typeul"> 177 <li><a href="#">菜单选项3-2</a></li> 178 <li><a href="#">菜单选项3-2</a> 179 <ul> 180 <li class="fli"><a href="#">菜单选项3-2-1</a></li> 181 <li class="lli"><a href="#">菜单选项3-2-2</a> 182 <ul> 183 <li class="fli"><a href="#">菜单选项3-2-1</a></li> 184 <li class="lli"><a href="#">菜单选项3-2-2</a> 185 <ul> 186 <li class="fli"><a href="#">菜单选项3-2-1</a></li> 187 <li class="lli"><a href="#">菜单选项3-2-2</a></li> 188 </ul> 189 </li> 190 </ul> 191 </li> 192 </ul> 193 </li> 194 <li><a href="#">菜单选项3-2</a></li> 195 <li class="lli"><a href="#">菜单选项3-2</a></li> 196 </ul> 197 </div> 198 <!-- position --> 199 </div> 200 <!-- menusel --> 201 </div> 202 <!-- menu --> 203 <script type="text/javascript"> 204 for (var x = 1; x < 4; x++) { 205 var menuid = document.getElementById("menu" + x); 206 menuid.num = x; 207 type(); 208 } 209 function type() { 210 var menuh2 = menuid.getElementsByTagName("h2"); 211 var menuul = menuid.getElementsByTagName("ul"); 212 var menuli = menuul[0].getElementsByTagName("li"); 213 menuh2[0].onmouseover = show; 214 menuh2[0].onmouseout = unshow; 215 menuul[0].onmouseover = show; 216 menuul[0].onmouseout = unshow; 217 function show() { 218 menuul[0].className = "clearfix typeul block" 219 } 220 function unshow() { 221 menuul[0].className = "typeul" 222 } 223 for (var i = 0; i < menuli.length; i++) { 224 menuli[i].num = i; 225 var liul = menuli[i].getElementsByTagName("ul")[0]; 226 if (liul) { 227 typeshow() 228 } 229 } 230 function typeshow() { 231 menuli[i].onmouseover = showul; 232 menuli[i].onmouseout = unshowul; 233 } 234 function showul() { 235 menuli[this.num].getElementsByTagName("ul")[0].className = "block"; 236 } 237 function unshowul() { 238 menuli[this.num].getElementsByTagName("ul")[0].className = ""; 239 } 240 } 241 </script> 242 </body> 243 </html>
原文：http://www.cnblogs.com/loushuibazi/p/3783512.html