html+css_模拟京东导航栏制作
又是一篇旧笔记，分享分享。
如题，是模拟京东导航栏进行的一个制作。
贴代码：
html(有点粗糙有点多- -):
1 <ul class="first_navigation"> 2 <div class="TopTitle"id="asd">全部商品分类</div> 3 <li><a href="#">图书、音像、数字商品</a> 4 <span></span> 5 <div class="book_content"> 6 <div class="left_content"> 7 <dl> 8 <dt><a href="#">电子书</a></dt> 9 <dd> 10 <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a> 11 <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> 12 13 </dd> 14 </dl> 15 <dl> 16 <dt><a href="#">数字音乐</a></dt> 17 <dd> 18 <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a> 19 <a href="#">乡村民谣</a> <a href="#">有声读物</a> 20 </dd> 21 </dl> 22 <dl> 23 <dt><a href="#">音像</a></dt> 24 <dd> 25 <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a> 26 </dd> 27 </dl> 28 <dl> 29 <dt><a href="#">文艺</a></dt> 30 <dd> 31 <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a 32 href="#">艺术</a> 33 </dd> 34 </dl> 35 <dl> 36 <dt><a href="#">人文社科</a></dt> 37 <dd> 38 <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a> 39 <a href="#">哲学/宗教</a> <a href="#">社会科学</a> 40 </dd> 41 </dl> 42 <dl> 43 <dt><a href="#">经管励志</a></dt> 44 <dd> 45 <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a> 46 </dd> 47 </dl> 48 <dl class="fore7"> 49 <dt><a href="#">生活</a></dt> 50 <dd> 51 <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a> 52 <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a> 53 <a href="#">动漫/幽默</a> <a href="#">体育/运动</a> 54 </dd> 55 </dl> 56 <dl> 57 <dt><a href="#">科技</a></dt> 58 <dd> 59 <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#"> 60 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a> 61 </dd> 62 </dl> 63 <dl> 64 <dt><a href="#">少儿</a></dt> 65 <dd> 66 <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a> 67 <a href="#">11-14岁</a> 68 </dd> 69 </dl> 70 <dl> 71 <dt><a href="#">教育</a></dt> 72 <dd> 73 <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a> 74 </dd> 75 </dl> 76 <dl> 77 <dt><a href="#">其它</a></dt> 78 <dd> 79 <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a> 80 <a href="#">杂志/期刊</a> 81 </dd> 82 </dl> 83 </div> 84 <div class="right_content"> 85 <dl> 86 <dd> 87 <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html"> 88 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 89 width="194" height="70" title="\家电"> 90 </a> 91 </dd> 92 <dd> 93 <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html"> 94 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 95 width="194" height="70" title="小家电--三请聚宝盆"> 96 </a> 97 </dd> 98 </dl> 99 <dl> 100 <dt>推荐品牌</dt> 101 <dd> 102 <a href="#">美的官方旗舰店</a> 103 </dd> 104 <dd> 105 <a href="#">苏泊尔旗舰店</a> 106 </dd> 107 <dd> 108 <a href="#">九阳旗舰店</a> 109 </dd> 110 <dd> 111 <a href="#">东菱旗舰店</a> 112 </dd> 113 <dd> 114 <a href="#">海尔统帅旗舰店</a> 115 </dd> 116 <dd> 117 <a href="#">小熊旗舰店</a> 118 </dd> 119 </dl> 120 </div> 121 </div> 122 </li> 123 <li><a href="#">家用电器</a> 124 <span></span> 125 <div class="book_content"> 126 <div class="left_content"> 127 <dl> 128 <dt><a href="#">书</a></dt> 129 <dd> 130 <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a> 131 <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> 132 133 </dd> 134 </dl> 135 <dl> 136 <dt><a href="#">数字音乐</a></dt> 137 <dd> 138 <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a> 139 <a href="#">乡村民谣</a> <a href="#">有声读物</a> 140 </dd> 141 </dl> 142 <dl> 143 <dt><a href="#">音像</a></dt> 144 <dd> 145 <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a> 146 </dd> 147 </dl> 148 <dl> 149 <dt><a href="#">文艺</a></dt> 150 <dd> 151 <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a 152 href="#">艺术</a> 153 </dd> 154 </dl> 155 <dl> 156 <dt><a href="#">人文社科</a></dt> 157 <dd> 158 <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a> 159 <a href="#">哲学/宗教</a> <a href="#">社会科学</a> 160 </dd> 161 </dl> 162 <dl> 163 <dt><a href="#">经管励志</a></dt> 164 <dd> 165 <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a> 166 </dd> 167 </dl> 168 <dl class="fore7"> 169 <dt><a href="#">生活</a></dt> 170 <dd> 171 <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a> 172 <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a> 173 <a href="#">动漫/幽默</a> <a href="#">体育/运动</a> 174 </dd> 175 </dl> 176 <dl> 177 <dt><a href="#">科技</a></dt> 178 <dd> 179 <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#"> 180 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a> 181 </dd> 182 </dl> 183 <dl> 184 <dt><a href="#">少儿</a></dt> 185 <dd> 186 <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a> 187 <a href="#">11-14岁</a> 188 </dd> 189 </dl> 190 <dl> 191 <dt><a href="#">教育</a></dt> 192 <dd> 193 <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a> 194 </dd> 195 </dl> 196 <dl> 197 <dt><a href="#">其它</a></dt> 198 <dd> 199 <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a> 200 <a href="#">杂志/期刊</a> 201 </dd> 202 </dl> 203 </div> 204 <div class="right_content"> 205 <dl> 206 <dd> 207 <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html"> 208 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 209 width="194" height="70" title="\家电"> 210 </a> 211 </dd> 212 <dd> 213 <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html"> 214 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 215 width="194" height="70" title="小家电--三请聚宝盆"> 216 </a> 217 </dd> 218 </dl> 219 <dl> 220 <dt>推荐品牌</dt> 221 <dd> 222 <a href="#">美的官方旗舰店</a> 223 </dd> 224 <dd> 225 <a href="#">苏泊尔旗舰店</a> 226 </dd> 227 <dd> 228 <a href="#">九阳旗舰店</a> 229 </dd> 230 <dd> 231 <a href="#">东菱旗舰店</a> 232 </dd> 233 <dd> 234 <a href="#">海尔统帅旗舰店</a> 235 </dd> 236 <dd> 237 <a href="#">小熊旗舰店</a> 238 </dd> 239 </dl> 240 </div> 241 </div> 242 </li> 243 <li><a href="#">手机、数码</a> 244 <span></span> 245 <div class="book_content"> 246 <div class="left_content"> 247 <dl> 248 <dt><a href="#">电子书</a></dt> 249 <dd> 250 <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a> 251 <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> 252 253 </dd> 254 </dl> 255 256 </div> 257 258 </div> 259 </li> 260 <li><a href="#">电脑、办公</a> 261 <span></span> 262 <div class="book_content"> 263 <div class="left_content"> 264 <dl> 265 <dt><a href="#">电子书</a></dt> 266 <dd> 267 <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a> 268 <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> 269 270 </dd> 271 </dl> 272 <dl> 273 <dt><a href="#">数字音乐</a></dt> 274 <dd> 275 <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a> 276 <a href="#">乡村民谣</a> <a href="#">有声读物</a> 277 </dd> 278 </dl> 279 <dl> 280 <dt><a href="#">音像</a></dt> 281 <dd> 282 <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a> 283 </dd> 284 </dl> 285 <dl> 286 <dt><a href="#">文艺</a></dt> 287 <dd> 288 <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a 289 href="#">艺术</a> 290 </dd> 291 </dl> 292 <dl> 293 <dt><a href="#">人文社科</a></dt> 294 <dd> 295 <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a> 296 <a href="#">哲学/宗教</a> <a href="#">社会科学</a> 297 </dd> 298 </dl> 299 <dl> 300 <dt><a href="#">经管励志</a></dt> 301 <dd> 302 <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a> 303 </dd> 304 </dl> 305 <dl class="fore7"> 306 <dt><a href="#">生活</a></dt> 307 <dd> 308 <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a> 309 <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a> 310 <a href="#">动漫/幽默</a> <a href="#">体育/运动</a> 311 </dd> 312 </dl> 313 <dl> 314 <dt><a href="#">科技</a></dt> 315 <dd> 316 <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#"> 317 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a> 318 </dd> 319 </dl> 320 <dl> 321 <dt><a href="#">少儿</a></dt> 322 <dd> 323 <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a> 324 <a href="#">11-14岁</a> 325 </dd> 326 </dl> 327 <dl> 328 <dt><a href="#">教育</a></dt> 329 <dd> 330 <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a> 331 </dd> 332 </dl> 333 <dl> 334 <dt><a href="#">其它</a></dt> 335 <dd> 336 <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a> 337 <a href="#">杂志/期刊</a> 338 </dd> 339 </dl> 340 </div> 341 <div class="right_content"> 342 <dl> 343 <dd> 344 <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html"> 345 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 346 width="194" height="70" title="\家电"> 347 </a> 348 </dd> 349 <dd> 350 <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html"> 351 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 352 width="194" height="70" title="小家电--三请聚宝盆"> 353 </a> 354 </dd> 355 </dl> 356 <dl> 357 <dt>推荐品牌</dt> 358 <dd> 359 <a href="#">美的官方旗舰店</a> 360 </dd> 361 <dd> 362 <a href="#">苏泊尔旗舰店</a> 363 </dd> 364 <dd> 365 <a href="#">九阳旗舰店</a> 366 </dd> 367 <dd> 368 <a href="#">东菱旗舰店</a> 369 </dd> 370 <dd> 371 <a href="#">海尔统帅旗舰店</a> 372 </dd> 373 <dd> 374 <a href="#">小熊旗舰店</a> 375 </dd> 376 </dl> 377 </div> 378 </div> 379 </li> 380 <li><a href="#">家居、家具、家装、厨具</a> 381 <span></span> 382 <div class="book_content"> 383 <div class="left_content"> 384 <dl> 385 <dt><a href="#">电子书</a></dt> 386 <dd> 387 <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a> 388 <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> 389 390 </dd> 391 </dl> 392 <dl> 393 <dt><a href="#">数字音乐</a></dt> 394 <dd> 395 <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a> 396 <a href="#">乡村民谣</a> <a href="#">有声读物</a> 397 </dd> 398 </dl> 399 <dl> 400 <dt><a href="#">音像</a></dt> 401 <dd> 402 <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a> 403 </dd> 404 </dl> 405 <dl> 406 <dt><a href="#">文艺</a></dt> 407 <dd> 408 <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a 409 href="#">艺术</a> 410 </dd> 411 </dl> 412 <dl> 413 <dt><a href="#">人文社科</a></dt> 414 <dd> 415 <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a> 416 <a href="#">哲学/宗教</a> <a href="#">社会科学</a> 417 </dd> 418 </dl> 419 <dl> 420 <dt><a href="#">经管励志</a></dt> 421 <dd> 422 <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a> 423 </dd> 424 </dl> 425 <dl class="fore7"> 426 <dt><a href="#">生活</a></dt> 427 <dd> 428 <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a> 429 <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a> 430 <a href="#">动漫/幽默</a> <a href="#">体育/运动</a> 431 </dd> 432 </dl> 433 <dl> 434 <dt><a href="#">科技</a></dt> 435 <dd> 436 <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#"> 437 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a> 438 </dd> 439 </dl> 440 <dl> 441 <dt><a href="#">少儿</a></dt> 442 <dd> 443 <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a> 444 <a href="#">11-14岁</a> 445 </dd> 446 </dl> 447 <dl> 448 <dt><a href="#">教育</a></dt> 449 <dd> 450 <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a> 451 </dd> 452 </dl> 453 <dl> 454 <dt><a href="#">其它</a></dt> 455 <dd> 456 <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a> 457 <a href="#">杂志/期刊</a> 458 </dd> 459 </dl> 460 </div> 461 <div class="right_content"> 462 <dl> 463 <dd> 464 <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html"> 465 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 466 width="194" height="70" title="\家电"> 467 </a> 468 </dd> 469 <dd> 470 <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html"> 471 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 472 width="194" height="70" title="小家电--三请聚宝盆"> 473 </a> 474 </dd> 475 </dl> 476 <dl> 477 <dt>推荐品牌</dt> 478 <dd> 479 <a href="#">美的官方旗舰店</a> 480 </dd> 481 <dd> 482 <a href="#">苏泊尔旗舰店</a> 483 </dd> 484 <dd> 485 <a href="#">九阳旗舰店</a> 486 </dd> 487 <dd> 488 <a href="#">东菱旗舰店</a> 489 </dd> 490 <dd> 491 <a href="#">海尔统帅旗舰店</a> 492 </dd> 493 <dd> 494 <a href="#">小熊旗舰店</a> 495 </dd> 496 </dl> 497 </div> 498 </div> 499 </li> 500 <li><a href="#">服饰内衣、珠宝首饰</a> 501 <span></span> 502 <div class="book_content"> 503 <div class="left_content"> 504 <dl> 505 <dt><a href="#">电子书</a></dt> 506 <dd> 507 <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a> 508 <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> 509 510 </dd> 511 </dl> 512 <dl> 513 <dt><a href="#">数字音乐</a></dt> 514 <dd> 515 <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a> 516 <a href="#">乡村民谣</a> <a href="#">有声读物</a> 517 </dd> 518 </dl> 519 <dl> 520 <dt><a href="#">音像</a></dt> 521 <dd> 522 <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a> 523 </dd> 524 </dl> 525 <dl> 526 <dt><a href="#">文艺</a></dt> 527 <dd> 528 <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a 529 href="#">艺术</a> 530 </dd> 531 </dl> 532 <dl> 533 <dt><a href="#">人文社科</a></dt> 534 <dd> 535 <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a> 536 <a href="#">哲学/宗教</a> <a href="#">社会科学</a> 537 </dd> 538 </dl> 539 <dl> 540 <dt><a href="#">经管励志</a></dt> 541 <dd> 542 <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a> 543 </dd> 544 </dl> 545 <dl class="fore7"> 546 <dt><a href="#">生活</a></dt> 547 <dd> 548 <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a> 549 <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a> 550 <a href="#">动漫/幽默</a> <a href="#">体育/运动</a> 551 </dd> 552 </dl> 553 <dl> 554 <dt><a href="#">科技</a></dt> 555 <dd> 556 <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#"> 557 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a> 558 </dd> 559 </dl> 560 <dl> 561 <dt><a href="#">少儿</a></dt> 562 <dd> 563 <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a> 564 <a href="#">11-14岁</a> 565 </dd> 566 </dl> 567 <dl> 568 <dt><a href="#">教育</a></dt> 569 <dd> 570 <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a> 571 </dd> 572 </dl> 573 <dl> 574 <dt><a href="#">其它</a></dt> 575 <dd> 576 <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a> 577 <a href="#">杂志/期刊</a> 578 </dd> 579 </dl> 580 </div> 581 <div class="right_content"> 582 <dl> 583 <dd> 584 <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html"> 585 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 586 width="194" height="70" title="\家电"> 587 </a> 588 </dd> 589 <dd> 590 <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html"> 591 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 592 width="194" height="70" title="小家电--三请聚宝盆"> 593 </a> 594 </dd> 595 </dl> 596 <dl> 597 <dt>推荐品牌</dt> 598 <dd> 599 <a href="#">美的官方旗舰店</a> 600 </dd> 601 <dd> 602 <a href="#">苏泊尔旗舰店</a> 603 </dd> 604 <dd> 605 <a href="#">九阳旗舰店</a> 606 </dd> 607 <dd> 608 <a href="#">东菱旗舰店</a> 609 </dd> 610 <dd> 611 <a href="#">海尔统帅旗舰店</a> 612 </dd> 613 <dd> 614 <a href="#">小熊旗舰店</a> 615 </dd> 616 </dl> 617 </div> 618 </div> 619 </li> 620 <li><a href="#">个护化妆</a></li> 621 <li><a href="#">鞋靴、箱包、钟表、奢侈品</a> 622 <span></span> 623 <div class="book_content"> 624 <div class="left_content"> 625 <dl> 626 <dt><a href="#">电子书</a></dt> 627 <dd> 628 <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a> 629 <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> 630 631 </dd> 632 </dl> 633 <dl> 634 <dt><a href="#">数字音乐</a></dt> 635 <dd> 636 <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a> 637 <a href="#">乡村民谣</a> <a href="#">有声读物</a> 638 </dd> 639 </dl> 640 <dl> 641 <dt><a href="#">音像</a></dt> 642 <dd> 643 <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a> 644 </dd> 645 </dl> 646 <dl> 647 <dt><a href="#">文艺</a></dt> 648 <dd> 649 <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a 650 href="#">艺术</a> 651 </dd> 652 </dl> 653 <dl> 654 <dt><a href="#">人文社科</a></dt> 655 <dd> 656 <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a> 657 <a href="#">哲学/宗教</a> <a href="#">社会科学</a> 658 </dd> 659 </dl> 660 <dl> 661 <dt><a href="#">经管励志</a></dt> 662 <dd> 663 <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a> 664 </dd> 665 </dl> 666 <dl class="fore7"> 667 <dt><a href="#">生活</a></dt> 668 <dd> 669 <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a> 670 <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a> 671 <a href="#">动漫/幽默</a> <a href="#">体育/运动</a> 672 </dd> 673 </dl> 674 <dl> 675 <dt><a href="#">科技</a></dt> 676 <dd> 677 <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#"> 678 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a> 679 </dd> 680 </dl> 681 <dl> 682 <dt><a href="#">少儿</a></dt> 683 <dd> 684 <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a> 685 <a href="#">11-14岁</a> 686 </dd> 687 </dl> 688 <dl> 689 <dt><a href="#">教育</a></dt> 690 <dd> 691 <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a> 692 </dd> 693 </dl> 694 <dl> 695 <dt><a href="#">其它</a></dt> 696 <dd> 697 <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a> 698 <a href="#">杂志/期刊</a> 699 </dd> 700 </dl> 701 </div> 702 <div class="right_content"> 703 <dl> 704 <dd> 705 <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html"> 706 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 707 width="194" height="70" title="\家电"> 708 </a> 709 </dd> 710 <dd> 711 <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html"> 712 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 713 width="194" height="70" title="小家电--三请聚宝盆"> 714 </a> 715 </dd> 716 </dl> 717 <dl> 718 <dt>推荐品牌</dt> 719 <dd> 720 <a href="#">美的官方旗舰店</a> 721 </dd> 722 <dd> 723 <a href="#">苏泊尔旗舰店</a> 724 </dd> 725 <dd> 726 <a href="#">九阳旗舰店</a> 727 </dd> 728 <dd> 729 <a href="#">东菱旗舰店</a> 730 </dd> 731 <dd> 732 <a href="#">海尔统帅旗舰店</a> 733 </dd> 734 <dd> 735 <a href="#">小熊旗舰店</a> 736 </dd> 737 </dl> 738 </div> 739 </div> 740 </li> 741 <li><a href="#">运动户外</a></li> 742 <li><a href="#">汽车用品</a></li> 743 <li><a href="#">母婴、玩具乐器</a></li> 744 <li><a href="#">食品饮料、酒类、生鲜</a></li> 745 <li><a href="#">营养保健</a></li> 746 </ul>
css:
1 <style type="text/css"> 2 .TopTitle{ 3 height: 40px; 4 line-height: 40px; 5 font-size: 20px; 6 padding-left: 30px; 7 background: #e4393c; 8 color: white; 9 font-weight: bold; 10 } 11 .first_navigation{ 12 display: block; 13 width: 260px; 14 border: 2px solid #e4393c; 15 margin: 0; 16 padding: 0; 17 } 18 .first_navigation li{ 19 display: block; 20 height: 30px; 21 line-height: 30px; 22 list-style: none; 23 padding-left: 15px; 24 } 25 .first_navigation li:hover{ 26 background: none; 27 border: 1px solid #DDD; 28 border-right:none; 29 box-shadow: 0 0 8px #DDD; 30 -moz-box-shadow: 0 0 8px #DDD; 31 -webkit-box-shadow:0 0 8px #DDD; 32 border-left: 4px solid #e4393c; 33 /*height: 60px;*/ 34 } 35 .first_navigation li a{ 36 text-decoration: none; 37 color: #313131; 38 } 39 .first_navigation li a:hover{ 40 text-decoration: underline; 41 color: #e4393c; 42 font-weight: bold; 43 } 44 .first_navigation li:hover span{ 45 background: white; 46 z-index: 20; 47 width: 30px; 48 height: 30px; 49 /* height: 60px;*/ 50 position: relative; 51 display: inline-block; 52 float: right; 53 } 54 .book_content{ 55 display: none; 56 } 57 .first_navigation li:hover .book_content{ 58 position: absolute; 59 left: 260px; 60 top: 35px; 61 background: white; 62 border: 1px solid #DDD; 63 box-shadow: 0 0 8px #DDD; 64 width: 800px; 65 display: block; 66 } 67 68 .left_content{ 69 width: 590px; 70 float: left; 71 } 72 .left_content dl{ 73 display: block; 74 overflow: hidden; 75 border-bottom: 1px solid #EEE; 76 padding-bottom: 8px; 77 padding-left: 15px; 78 overflow: hidden; 79 80 } 81 .left_content dl dt{ 82 display: block; 83 float: left; 84 text-align: right; 85 line-height: 22px; 86 height: 22px; 87 padding-right: 6px; 88 } 89 .left_content dl dt a{ 90 text-decoration: underline; 91 color: #e4393c; 92 font-weight: bold; 93 font-size: 17px; 94 } 95 .left_content dl dd{ 96 display: block; 97 padding-left: 6px; 98 overflow: hidden; 99 } 100 .left_content dl dd a{ 101 display: block; 102 float: left; 103 height: 16px; 104 line-height: 16px; 105 margin:3px 0; 106 color: #737373; 107 padding:0 10px; 108 border-left: 1px solid #DDD; 109 font-size: 14px; 110 } 111 .left_content dl dd a:hover{ 112 color: #e4393c; 113 text-decoration: underline; 114 font-weight: bold; 115 } 116 .right_content{ 117 width: 200px; 118 float: left; 119 overflow: hidden; 120 margin-left: 10px; 121 } 122 .right_content dl dd{ 123 margin:3px 0; 124 font-size: 13px; 125 } 126 .right_content dl dd a{ 127 color: #737373; 128 } 129 .right_content dl dd a:hover{ 130 text-decoration: underline; 131 color: #737373; 132 font-weight: bold; 133 } 134 .right_content dl dt{ 135 color: #e4393c; 136 font-weight: bold; 137 font-size: 17px; 138 } 139 </style>
js：
<script type="text/javascript"> var Lis = document.getElementsByTagName("li"); alert(Lis.length); for(var i=0;i<Lis.length;i++){ Lis[i].i=i; Lis[i].onmouseover=function(){ //防止悬浮层内容太少 //当前鼠标的Li的top var h0 = (this.i-1)*30+50; var h1= this.getElementsByTagName("div")[0].offsetHeight; var h = this.getElementsByTagName("div")[0].style.top+h1; if(h<h0){ this.getElementsByTagName("div")[0].style.top=h0+"px"; } if(h1>=550){ this.getElementsByTagName("div")[0].style.top="3px"; } } Lis[i].onmouseout=function(){ } } </script>
效果展示：
PS:效果出不来，sorry，因为我用的是获取标签选择器,然后博客园自带的li有很多，只能用jq（博客园用不了）或者给每一个li做一个class。浩大的工程。。。。
- 图书、音像、数字商品
- 家用电器
- 手机、数码
- 电脑、办公
- 家居、家具、家装、厨具
- 服饰内衣、珠宝首饰
- 个护化妆
- 鞋靴、箱包、钟表、奢侈品
- 运动户外
- 汽车用品
- 母婴、玩具乐器
- 食品饮料、酒类、生鲜
- 营养保健
附上一个截图：（最终效果）
以上内容，如有错误请指出，不甚感激。
