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>