【照虎画猫】京东首页商品菜单列表的实现

之前做了一个类似于京东的电商网站项目，同时顺带也“临摹”了一下京东的页面：
登录页：
首页：
有个词语叫做“照猫画虎”，这个词语太不谦虚，就像“抛玉引砖”一样的狂傲，在电脑屏幕前面对着数量庞大的代码，哪有心情出此豪言，只能说是照虎画猫。很明显，我临摹的页面确实做了许多精简。
进入正题。
京东首页的商品菜单列表，实现起来并不麻烦，只是当初自己在写相应的js代码时，费了很多“心机”，绕了不少弯路—-还是经验不足的问题—最终算是解决，所以在此分享给初学前端的朋友。
不多说，直接贴全部代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;}body {font: 12px/150% Arial, Verdana, "\5b8b\4f53";color: #666;background: #fff;-webkit-font-smoothing: antialiased;}a:hover {color: #C81623;}a {color: #666;text-decoration: none;}ul {list-style: none;}/*导航栏 所有商品开始*/#nav {height: 44px;border-bottom: 2px solid #B1191A;_overflow: hidden}#nav .w {position: relative;z-index: 9;height: 44px}#nav .w .w-spacer {display: none}#nav .w-spacer {position: absolute;top: -1px;z-index: 1;width: 100%;height: 44px;border-top: 1px solid #DDD;border-bottom: 2px solid #B1191A}#categorys {float: left;position: relative;z-index: 10;width: 210px;height: 44px;overflow: visible;background: #B1191A}#categorys .dt a {display: block;width: 190px;height: 44px;padding: 0 10px;background: #B1191A;font: 400 15px/44px "microsoft yahei";color: #fff;text-decoration: none}#categorys .dt s {position: relative;top: -9px;text-decoration: none;}#categorys .dt .ci-right {top: 20px;right: 7px;height: 7px;overflow: hidden;font: 700 20px/16px simsun;color: #fff;transition: transform .1s ease-in 0s;-webkit-transition: -webkit-transform .1s ease-in 0s;display: block;position: absolute;}#categorys .dd {height: 156px;background: #c81623;margin-top: 2px;}#categorys .dd-inner .item {border-left: 1px solid #b61d1d;position: relative;z-index: 1;height: 31px;color: #fff;}#categorys .dd-inner .item a {color: #fff;}#categorys .dd-inner h3 {position: absolute;z-index: 2;height: 31px;padding: 0 10px;line-height: 31px;font-family: "microsoft yahei";font-size: 14px;font-weight: 400;}#categorys .dd-inner i {position: absolute;z-index: 1;top: 9px;right: 14px;width: 4px;height: 14px;font: 400 9px/14px consolas;}#categorys .dd-inner .hover {background: #f7f7f7;color: #B61D1D;}#categorys .dd-inner .hover a {color: #B61D1D;}#categorys .dd-inner .hover i {top: 0;left: 205px;width: 14px;height: 31px;background: #f7f7f7;overflow: hidden;line-height: 200px;}#categorys .dorpdown-layer {display: none;position: absolute;left: 209px;top: 45px;width: 779px;background: #f7f7f7;border: 1px solid #b61d1d;overflow: hidden;}#categorys .dd:hover .dorpdown-layer {display: block;}#categorys .item-sub {display: none;zoom: 1;overflow: hidden;}#categorys .item-sub:hover {display: block;}#categorys .item-sub:after {content: ".";display: block;height: 0;clear: both;}#categorys .item-channels {float: left;display: inline;width: 570px;height: 24px;padding: 20px 0 0 20px;background: #f7f7f7;overflow: hidden;}#categorys .item-channels a {float: left;display: inline;display: inline-block;*display: inline;*zoom: 1;padding: 0 0 0 8px;margin-right: 10px;line-height: 24px;background: #7C7171;color: #fff;white-space: nowrap}#categorys .item-channels a:hover {background: #C81623}#categorys .item-channels a:hover i {background: #B1191A}#categorys .item-channels i {display: inline-block;*zoom: 1;_display: inline;margin-left: 8px;width: 23px;height: 24px;font: 400 9px/24px consolas;background: #5c5251;text-align: center;cursor: pointer}#categorys .item-channels .line {border-left: 1px solid #dbdbdb;display: inline;float: left;height: 24px;margin-right: 7px;width: 1px;overflow: hidden}#categorys .item-channels .img-link {background: 0 0;line-height: normal;padding: 0}#categorys .item-channels .img-link:hover {background: 0 0}#categorys .item-channels .style-red {background: #c81623}#categorys .item-channels .style-red i {background: #b1191a}#categorys .item-channels .style-red:hover {background: #961019}#categorys .item-channels .style-red:hover i {background: #851313}#categorys .subitems {float: left;width: 570px;padding: 6px 0 1006px 20px;margin-bottom: -1000px;background: #f7f7f7;min-height: 409px;_height: 409px;_overflow: visible}#categorys .subitems dl {width: 100%;overflow: hidden;line-height: 2em}#categorys .subitems dl.fore1 dd {border-top: none}#categorys .subitems dt {position: relative;float: left;width: 54px;padding: 8px 30px 0 0;text-align: right;font-weight: 700}#categorys .subitems dt i {position: absolute;top: 13px;right: 18px;width: 4px;height: 14px;font: 400 9px/14px consolas}#categorys .subitems dd {float: left;width: 480px;padding: 6px 0;border-top: 1px solid #eee}#categorys .subitems dd a {float: left;padding: 0 8px;margin: 4px 0;line-height: 16px;height: 16px;border-left: 1px solid #e0e0e0;white-space: nowrap}#categorys .subitems .style-red {color: #c81623}#categorys .subitems .style-red-border {float: left;margin: 4px 8px 4px 0;height: 16px;background: #f6f0f0;overflow: hidden}#categorys .subitems .style-red-border a {font-family: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;color: #c81623;line-height: 12px;line-height: 14px\9;line-height: 14px\0;line-height: 12px\9\0;height: 12px;padding: 1px;margin: 0;border: 1px dotted #db7078;border-left: none;border-right: none;display: inline-block}#categorys .subitems .style-red-border .left-b,#categorys .subitems .style-red-border .right-b {float: left;background: url(//img10.360buyimg.com/uba/jfs/t2986/155/1039328667/119/6d2a472a/57722598N82f09586.png) no-repeat 0 0;width: 5px;height: 16px}#categorys .subitems .style-red-border .right-b {background-position: -5px 0}#categorys .item-brands {float: right;display: inline;width: 168px;overflow: hidden;margin: 19px 20px 10px 0}#categorys .item-brands a {float: left;display: inline;margin: 1px 0 0 1px}#categorys .item-promotions {float: right;display: inline;width: 168px;margin-right: 20px}#categorys .item-promotions a {display: block;margin-bottom: 1px}#nav .hover .dt .ci-right {transform: rotate(180deg);-webkit-transform: rotate(180deg);_top: 17px}#navitems {float: left;position: relative;z-index: 2}#navitems .spacer,#navitems a,#navitems li,#navitems ul {float: left}#navitems .spacer {display: none}#navitems a {height: 44px;padding: 0 20px;text-align: center;text-decoration: none;font: 400 15px/44px "microsoft yahei";color: #333}#navitems a:hover {color: #C81623}#navitems .spacer {width: 1px;height: 24px;margin: 10px 0 0;background: #DDD;overflow: hidden}#treasure {float: right}#categorys .item-channels {width: 790px}#categorys .dorpdown-layer {width: 999px}#categorys .subitems {width: 790px}#categorys .subitems dd {width: 620px}#categorys .subitems-main1,#categorys .subitems-main2 {float: left;width: 365px;padding-right: 10px;margin-right: 10px;border-right: 1px solid #eee;margin-top: 8px}#categorys .subitems-main1 dd,#categorys .subitems-main2 dd {width: 275px}#categorys .subitems-main1 .fore1,#categorys .subitems-main1 .fore8,#categorys .subitems-main2 .fore1,#categorys .subitems-main2 .fore8 {margin-top: -5px}#categorys .subitems-main1 .fore1 dd,#categorys .subitems-main1 .fore8 dd,#categorys .subitems-main2 .fore1 dd,#categorys .subitems-main2 .fore8 dd {border-top: 0}#categorys .subitems-main2 {border-right: 0}#navitems li a {font-size: 16px}/*导航栏结束*/</style></head><body><div id="nav"><div class="w"><div class="w-spacer"></div><div id="categorys" class="dorpdown"><div class="dt"><a target="_blank" href="">全部商品分类</a></div><div class="dd"><div class="dd-inner" id="categorys-dd-inner"><div class="item fore1" data-index="1"><h3><a target="_blank" href="">家用电器</a></h3><i>&gt;</i></div><div class="item fore2" data-index="2"><h3><a target="_blank" href="">手机</a><a target="_blank" href="">数码</a>、<a target="_blank" href="">京东通信</a></h3><i>&gt;</i></div><div class="item fore3" data-index="3"><h3><a target="_blank" href="">电脑、办公</a></h3><i>&gt;</i></div><div class="item fore4" data-index="4"><h3><a target="_blank" href="">家居</a>、<a target="_blank" href="">家具</a>、<a target="_blank" href="">家装</a>、<a target="_blank" href="">厨具</a></h3><i>&gt;</i></div><div class="item fore5" data-index="5"><h3><a target="_blank" href="">男装</a>、<a target="_blank" href="">女装</a>、<a target="_blank" href="">童装</a>、<a target="_blank" href="">内衣</a></h3><i>&gt;</i></div></div><div class="dorpdown-layer" id="category-dorpdown-layer"><div class="item-sub" id="category-item-1" data-id="1"><div class="item-brands"><div class="brands-inner"><a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a></div></div><div class="item-channels"><div class="channels"><a href="" target="_blank">品牌日<i>&gt;</i></a><a href="" target="_blank">家电城<i>&gt;</i></a><a href="" target="_blank">智能生活馆<i>&gt;</i></a><a href="" target="_blank">京东净化馆<i>&gt;</i></a><a href="" target="_blank">京东帮服务店<i>&gt;</i></a><a href="" target="_blank">家电众筹馆<i>&gt;</i></a></div></div><div class="subitems"><dl class="fore1"><dt><a href="" target="_blank">大家电<i>&gt;</i></a></dt><dd><a href="" target="_blank">平板电视</a><a href="" target="_blank">空调</a><a href="" target="_blank">冰箱</a><a href="" target="_blank">洗衣机</a><a href="" target="_blank">家庭影院</a><a href="" target="_blank">DVD</a><a href="" target="_blank">迷你音响</a><a href="" target="_blank">冷柜/冰吧</a><a href="" target="_blank">酒柜</a><a href="" target="_blank">家电配件</a></dd></dl><dl class="fore2"><dt><a href="" target="_blank">厨卫大电<i>&gt;</i></a></dt><dd><a href="" target="_blank">油烟机</a><a href="" target="_blank">燃气灶</a><a href="" target="_blank">烟灶套装</a><a href="" target="_blank">消毒柜</a><a href="" target="_blank">洗碗机</a><a href="" target="_blank">电热水器</a><a href="" target="_blank">燃气热水器</a><a href="" target="_blank">嵌入式厨电</a></dd></dl><dl class="fore3"><dt><a href="" target="_blank">厨房小电<i>&gt;</i></a></dt><dd><a href="" target="_blank">电饭煲</a><a href="" target="_blank">微波炉</a><a href="" target="_blank">电烤箱</a><a href="" target="_blank">电磁炉</a><a href="" target="_blank">电压力锅</a><a href="" target="_blank">豆浆机</a><a href="" target="_blank">咖啡机</a><a href="" target="_blank">面包机</a><a href="" target="_blank">榨汁机</a><a href="" target="_blank">料理机</a><a href="" target="_blank">电饼铛</a><a href="" target="_blank">养生壶/煎药壶</a><a href="" target="_blank">酸奶机</a><a href="" target="_blank">煮蛋器</a><a href="" target="_blank">电水壶/热水瓶</a><a href="" target="_blank">电炖锅</a><a href="" target="_blank">多用途锅</a><a href="" target="_blank">电烧烤炉</a><a href="" target="_blank">电热饭盒</a><a href="" target="_blank">其它厨房电器</a></dd></dl><dl class="fore4"><dt><a href="" target="_blank">生活电器<i>&gt;</i></a></dt><dd><a href="" target="_blank">电风扇</a><a href="" target="_blank">冷风扇</a><a href="" target="_blank">吸尘器</a><a href="" target="_blank">净化器</a><a href="" target="_blank">扫地机器人</a><a href="" target="_blank">加湿器</a><a href="" target="_blank">挂烫机/熨斗</a><a href="" target="_blank">取暖电器</a><a href="" target="_blank">插座</a><a href="" target="_blank">电话机</a><a href="" target="_blank">净水器</a><a href="" target="_blank">饮水机</a><a href="" target="_blank">除湿机</a><a href="" target="_blank">干衣机</a><a href="" target="_blank">清洁机</a><a href="" target="_blank">收录/音机</a><a href="" target="_blank">其它生活电器</a><a href="" target="_blank">生活电器配件</a></dd></dl><dl class="fore5"><dt><a href="" target="_blank">个护健康<i>&gt;</i></a></dt><dd><a href="" target="_blank">剃须刀</a><a href="" target="_blank">口腔护理</a><a href="" target="_blank">电吹风</a><a href="" target="_blank">美容器</a><a href="" target="_blank">卷/直发器</a><a href="" target="_blank">理发器</a><a href="" target="_blank">剃/脱毛器</a><a href="" target="_blank">足浴盆</a><a href="" target="_blank">健康秤/厨房秤</a><a href="" target="_blank">按摩器</a><a href="" target="_blank">按摩椅</a><a href="" target="_blank">血压计</a><a href="" target="_blank">血糖仪</a><a href="" target="_blank">体温计</a><a href="" target="_blank">计步器/脂肪检测仪</a><a href="" target="_blank">其它健康电器</a></dd></dl><dl class="fore6"><dt><a href="" target="_blank">五金家装<i>&gt;</i></a></dt><dd><a href="" target="_blank">电动工具</a><a href="" target="_blank">手动工具</a><a href="" target="_blank">仪器仪表</a><a href="" target="_blank">浴霸/排气扇</a><a href="" target="_blank">灯具</a><a href="" target="_blank">LED灯</a><a href="" target="_blank">洁身器</a><a href="" target="_blank">水槽</a><a href="" target="_blank">龙头</a><a href="" target="_blank">淋浴花洒</a><a href="" target="_blank">厨卫五金</a><a href="" target="_blank">家具五金</a><a href="" target="_blank">门铃</a><a href="" target="_blank">电气开关</a><a href="" target="_blank">插座</a><a href="" target="_blank">电工电料</a><a href="" target="_blank">监控安防</a><a href="" target="_blank">电线/线缆</a></dd></dl></div><div class="item-promotions"><a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a><a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a></div></div><div class="item-sub" id="category-item-2" data-id="2"><div class="item-brands"><div class="brands-inner"><a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a></div></div><div class="item-channels"><div class="channels"><a href="" target="_blank">玩3C<i>&gt;</i></a><a href="" target="_blank">手机频道<i>&gt;</i></a><a href="" target="_blank">网上营业厅<i>&gt;</i></a><a href="" target="_blank">配件城<i>&gt;</i></a><a href="" target="_blank">影像Club<i>&gt;</i></a><a href="" target="_blank">以旧换新<i>&gt;</i></a></div></div><div class="subitems"><dl class="fore1"><dt><a href="" target="_blank">手机通讯<i>&gt;</i></a></dt><dd><a href="" target="_blank">手机</a><a href="" target="_blank">对讲机</a><a href="" target="_blank">以旧换新</a><a href="" target="_blank">手机维修</a></dd></dl><dl class="fore2"><dt><a href="" target="_blank">京东通信<i>&gt;</i></a></dt><dd><a href="" target="_blank">选号中心</a><a href="" target="_blank">自助服务</a></dd></dl><dl class="fore3"><dt><a href="" target="_blank">运营商<i>&gt;</i></a></dt><dd><a href="" target="_blank">合约机</a><a href="" target="_blank">办套餐</a><a href="" target="_blank">选号码</a><a href="" target="_blank">装宽带</a><a href="" target="_blank">中国移动</a><a href="" target="_blank">中国联通</a><a href="" target="_blank">中国电信</a></dd></dl><dl class="fore4"><dt><a href="" target="_blank">手机配件<i>&gt;</i></a></dt><dd><a href="" target="_blank">手机电池</a><a href="" target="_blank">移动电源</a><a href="" target="_blank">蓝牙耳机</a><a href="" target="_blank">充电器</a><a href="" target="_blank">数据线</a><a href="" target="_blank">手机耳机</a><a href="" target="_blank">手机支架</a><a href="" target="_blank">贴膜</a><a href="" target="_blank">手机存储卡</a><a href="" target="_blank">保护套</a><a href="" target="_blank">车载配件</a><a href="" target="_blank">苹果周边</a><a href="" target="_blank">创意配件</a><a href="" target="_blank">手机饰品</a><a href="" target="_blank">拍照配件</a></dd></dl><dl class="fore5"><dt><a href="" target="_blank">摄影摄像<i>&gt;</i></a></dt><dd><a href="" target="_blank">数码相机</a><a href="" target="_blank">单电/微单相机</a><a href="" target="_blank">单反相机</a><a href="" target="_blank">拍立得</a><a href="" target="_blank">运动相机</a><a href="" target="_blank">摄像机</a><a href="" target="_blank">镜头</a><a href="" target="_blank">户外器材</a><a href="" target="_blank">影棚器材</a><a href="" target="_blank">冲印服务</a><a href="" target="_blank">数码相框</a></dd></dl><dl class="fore6"><dt><a href="" target="_blank">数码配件<i>&gt;</i></a></dt><dd><a href="" target="_blank">存储卡</a><a href="" target="_blank">读卡器</a><a href="" target="_blank">支架</a><a href="" target="_blank">滤镜</a><a href="" target="_blank">闪光灯/手柄</a><a href="" target="_blank">相机包</a><a href="" target="_blank">三脚架/云台</a><a href="" target="_blank">相机清洁/贴膜</a><a href="" target="_blank">机身附件</a><a href="" target="_blank">镜头附件</a><a href="" target="_blank">电池/充电器</a></dd></dl><dl class="fore7"><dt><a href="" target="_blank">影音娱乐<i>&gt;</i></a></dt><dd><a href="" target="_blank">耳机/耳麦</a><a href="" target="_blank">音箱/音响</a><a href="" target="_blank">便携/无线音箱</a><a href="" target="_blank">收音机</a><a href="" target="_blank">麦克风</a><a href="" target="_blank">MP3/MP4</a><a href="" target="_blank">专业音频</a></dd></dl><dl class="fore8"><dt><a href="" target="_blank">智能设备<i>&gt;</i></a></dt><dd><a href="" target="_blank">智能手环</a><a href="" target="_blank">智能手表</a><a href="" target="_blank">智能眼镜</a><a href="" target="_blank">智能机器人</a><a href="" target="_blank">运动跟踪器</a><a href="" target="_blank">健康监测</a><a href="" target="_blank">智能配饰</a><a href="" target="_blank">智能家居</a><a href="" target="_blank">体感车</a><a href="" target="_blank">无人机</a><a href="" target="_blank">其他配件</a></dd></dl><dl class="fore9"><dt><a href="" target="_blank">电子教育<i>&gt;</i></a></dt><dd><a href="" target="_blank">学生平板</a><a href="" target="_blank">点读机/笔</a><a href="" target="_blank">早教益智</a><a href="" target="_blank">录音笔</a><a href="" target="_blank">电纸书</a><a href="" target="_blank">电子词典</a><a href="" target="_blank">复读机</a></dd></dl></div><div class="item-promotions"><a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a><a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a></div></div><div class="item-sub" id="category-item-3" data-id="3"><div class="item-brands"><div class="brands-inner"><a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a></div></div><div class="item-channels"><div class="channels"><a href="" target="_blank">玩3C<i>&gt;</i></a><a href="" target="_blank">本周热卖<i>&gt;</i></a><a href="" target="_blank">游戏部落<i>&gt;</i></a><a href="" target="_blank">GAME+<i>&gt;</i></a><a href="" target="_blank">装机大师<i>&gt;</i></a><a href="" target="_blank">办公生活馆<i>&gt;</i></a></div></div><div class="subitems"><dl class="fore1"><dt><a href="" target="_blank">电脑整机<i>&gt;</i></a></dt><dd><a href="" target="_blank">笔记本</a><a href="" target="_blank">游戏本</a><a href="" target="_blank">平板电脑</a><a href="" target="_blank">平板电脑配件</a><a href="" target="_blank">台式机</a><a href="" target="_blank">一体机</a><a href="" target="_blank">服务器/工作站</a><a href="" target="_blank">笔记本配件</a></dd></dl><dl class="fore2"><dt><a href="" target="_blank">电脑配件<i>&gt;</i></a></dt><dd><a href="" target="_blank">CPU</a><a href="" target="_blank">主板</a><a href="" target="_blank">显卡</a><a href="" target="_blank">硬盘</a><a href="" target="_blank">SSD固态硬盘</a><a href="" target="_blank">内存</a><a href="" target="_blank">机箱</a><a href="" target="_blank">电源</a><a href="" target="_blank">显示器</a><a href="" target="_blank">刻录机/光驱</a><a href="" target="_blank">声卡/扩展卡</a><a href="" target="_blank">散热器</a><a href="" target="_blank">装机配件</a><a href="" target="_blank">组装电脑</a></dd></dl><dl class="fore3"><dt><a href="" target="_blank">外设产品<i>&gt;</i></a></dt><dd><a href="" target="_blank">鼠标</a><a href="" target="_blank">键盘</a><a href="" target="_blank">键鼠套装</a><a href="" target="_blank">网络仪表仪器</a><a href="" target="_blank">U盘</a><a href="" target="_blank">移动硬盘</a><a href="" target="_blank">鼠标垫</a><a href="" target="_blank">摄像头</a><a href="" target="_blank">线缆</a><a href="" target="_blank">手写板</a><a href="" target="_blank">硬盘盒</a><a href="" target="_blank">电脑工具</a><a href="" target="_blank">电脑清洁</a><a href="" target="_blank">UPS电源</a><a href="" target="_blank">插座</a></dd></dl><dl class="fore4"><dt><a href="" target="_blank">游戏设备<i>&gt;</i></a></dt><dd><a href="" target="_blank">游戏机</a><a href="" target="_blank">游戏耳机</a><a href="" target="_blank">手柄/方向盘</a><a href="" target="_blank">游戏软件</a><a href="" target="_blank">游戏周边</a></dd></dl><dl class="fore5"><dt><a href="" target="_blank">网络产品<i>&gt;</i></a></dt><dd><a href="" target="_blank">路由器</a><a href="" target="_blank">网卡</a><a href="" target="_blank">交换机</a><a href="" target="_blank">网络存储</a><a href="" target="_blank">4G/3G上网</a><a href="" target="_blank">网络盒子</a><a href="" target="_blank">网络配件</a></dd></dl><dl class="fore6"><dt><a href="" target="_blank">办公设备<i>&gt;</i></a></dt><dd><a href="" target="_blank">投影机</a><a href="" target="_blank">投影配件</a><a href="" target="_blank">多功能一体机</a><a href="" target="_blank">打印机</a><a href="" target="_blank">传真设备</a><a href="" target="_blank">验钞/点钞机</a><a href="" target="_blank">扫描设备</a><a href="" target="_blank">复合机</a><a href="" target="_blank">碎纸机</a><a href="" target="_blank">考勤机</a><a href="" target="_blank">收款/POS机</a><a href="" target="_blank">会议音频视频</a><a href="" target="_blank">保险柜</a><a href="" target="_blank">装订/封装机</a><a href="" target="_blank">安防监控</a><a href="" target="_blank">办公家具</a><a href="" target="_blank">白板</a></dd></dl><dl class="fore7"><dt><a href="" target="_blank">文具耗材<i>&gt;</i></a></dt><dd><a href="" target="_blank">硒鼓/墨粉</a><a href="" target="_blank">墨盒</a><a href="" target="_blank">色带</a><a href="" target="_blank">纸类</a><a href="" target="_blank">办公文具</a><a href="" target="_blank">学生文具</a><a href="" target="_blank">文件管理</a><a href="" target="_blank">本册/便签</a><a href="" target="_blank">计算器</a><a href="" target="_blank">笔类</a><a href="" target="_blank">画具画材</a><a href="" target="_blank">财会用品</a><a href="" target="_blank">刻录碟片/附件</a></dd></dl><dl class="fore8"><dt><a href="" target="_blank">服务产品<i>&gt;</i></a></dt><dd><a href="" target="_blank">延保服务</a><a href="" target="_blank">上门安装</a><a href="" target="_blank">维修保养</a><a href="" target="_blank">电脑软件</a></dd></dl></div><div class="item-promotions"><a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a><a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a></div></div><div class="item-sub" id="category-item-4" data-id="4"><div class="item-brands"><div class="brands-inner"><a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a></div></div><div class="item-channels"><div class="channels"><a href="" target="_blank">家装城<i>&gt;</i></a><a href="" target="_blank">居家日用<i>&gt;</i></a><a href="" target="_blank">精品家具<i>&gt;</i></a><a href="" target="_blank">家装建材<i>&gt;</i></a><a href="" target="_blank">厨房达人<i>&gt;</i></a><a href="" target="_blank">装修服务<i>&gt;</i></a></div></div><div class="subitems"><dl class="fore1"><dt><a href="" target="_blank">厨具<i>&gt;</i></a></dt><dd><a href="" target="_blank">烹饪锅具</a><a href="" target="_blank">刀剪菜板</a><a href="" target="_blank">厨房配件</a><a href="" target="_blank">水具酒具</a><a href="" target="_blank">餐具</a><a href="" target="_blank">茶具/咖啡具</a></dd></dl><dl class="fore2"><dt><a href="" target="_blank">家装建材<i>&gt;</i></a></dt><dd><a href="" target="_blank">灯饰照明</a><a href="" target="_blank">厨房卫浴</a><a href="" target="_blank">五金工具</a><a href="" target="_blank">电工电料</a><a href="" target="_blank">墙地面材料</a><a href="" target="_blank">装饰材料</a><a href="" target="_blank">装修服务</a><a href="" target="_blank">吸顶灯</a><a href="" target="_blank">淋浴花洒</a><a href="" target="_blank">开关插座</a><a href="" target="_blank">油漆涂料</a><a href="" target="_blank">龙头</a></dd></dl><dl class="fore3"><dt><a href="" target="_blank">家纺<i>&gt;</i></a></dt><dd><a href="" target="_blank">床品套件</a><a href="" target="_blank">被子</a><a href="" target="_blank">枕芯</a><a href="" target="_blank">蚊帐</a><a href="" target="_blank">凉席</a><a href="" target="_blank">毛巾浴巾</a><a href="" target="_blank">床单被罩</a><a href="" target="_blank">床垫/床褥</a><a href="" target="_blank">毯子</a><a href="" target="_blank">抱枕靠垫</a><a href="" target="_blank">窗帘/窗纱</a><a href="" target="_blank">电热毯</a><a href="" target="_blank">布艺软饰</a></dd></dl><dl class="fore4"><dt><a href="" target="_blank">家具<i>&gt;</i></a></dt><dd><a href="" target="_blank">卧室家具</a><a href="" target="_blank">客厅家具</a><a href="" target="_blank">餐厅家具</a><a href="" target="_blank">书房家具</a><a href="" target="_blank">儿童家具</a><a href="" target="_blank">储物家具</a><a href="" target="_blank">阳台/户外</a><a href="" target="_blank">商业办公</a><a href="" target="_blank">床</a><a href="" target="_blank">床垫</a><a href="" target="_blank">沙发</a><a href="" target="_blank">电脑椅</a><a href="" target="_blank">衣柜</a><a href="" target="_blank">茶几</a><a href="" target="_blank">电视柜</a><a href="" target="_blank">餐桌</a><a href="" target="_blank">电脑桌</a><a href="" target="_blank">鞋架/衣帽架</a></dd></dl><dl class="fore5"><dt><a href="" target="_blank">灯具<i>&gt;</i></a></dt><dd><a href="" target="_blank">台灯</a><a href="" target="_blank">吸顶灯</a><a href="" target="_blank">筒灯射灯</a><a href="" target="_blank">LED灯</a><a href="" target="_blank">节能灯</a><a href="" target="_blank">落地灯</a><a href="" target="_blank">五金电器</a><a href="" target="_blank">应急灯/手电</a><a href="" target="_blank">装饰灯</a><a href="" target="_blank">吊灯</a><a href="" target="_blank">氛围照明</a></dd></dl><dl class="fore6"><dt><a href="" target="_blank">生活日用<i>&gt;</i></a></dt><dd><a href="" target="_blank">收纳用品</a><a href="" target="_blank">雨伞雨具</a><a href="" target="_blank">净化除味</a><a href="" target="_blank">浴室用品</a><a href="" target="_blank">洗晒/熨烫</a><a href="" target="_blank">缝纫/针织用品</a><a href="" target="_blank">清洁工具</a></dd></dl><dl class="fore7"><dt><a href="" target="_blank">家装软饰<i>&gt;</i></a></dt><dd><a href="" target="_blank">桌布/罩件</a><a href="" target="_blank">地毯地垫</a><a href="" target="_blank">沙发垫套/椅垫</a><a href="" target="_blank">装饰字画</a><a href="" target="_blank">装饰摆件</a><a href="" target="_blank">手工/十字绣</a><a href="" target="_blank">相框/照片墙</a><a href="" target="_blank">墙贴/装饰贴</a><a href="" target="_blank">花瓶花艺</a><a href="" target="_blank">香薰蜡烛</a><a href="" target="_blank">节庆饰品</a><a href="" target="_blank">钟饰</a><a href="" target="_blank">帘艺隔断</a><a href="" target="_blank">创意家居</a><a href="" target="_blank">保暖防护</a></dd></dl></div><div class="item-promotions"><a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a><a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a></div></div><div class="item-sub" id="category-item-5" data-id="5"><div class="item-brands"><div class="brands-inner"><a href="" class="img-link" target="_blank"><img src="img/category/54d9ef34N7cc61f4c.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/5534f4d6N6cf59e34.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55a5b5baN89a65ec2.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/55b1d930Nf0bfccbb.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/562f4971Na5379aba.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/564a8df2Nbab8fdab.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a6d27cNbb9b4a77.jpg" width="83" height="35"></a><a href="" class="img-link" target="_blank"><img src="img/category/56a72d4fN4d1b42fe.jpg" width="83" height="35"></a></div></div><div class="item-channels"><div class="channels"><a href="" target="_blank">男装<i>&gt;</i></a><a href="" target="_blank">女装<i>&gt;</i></a><a href="" target="_blank">内衣<i>&gt;</i></a><a href="" target="_blank">童装童鞋<i>&gt;</i></a><a href="" target="_blank">国际品牌<i>&gt;</i></a><a href="" target="_blank">自营服装<i>&gt;</i></a></div></div><div class="subitems"><dl class="fore1"><dt><a href="" target="_blank">女装<i>&gt;</i></a></dt><dd><a href="" target="_blank">连衣裙</a><a href="" target="_blank">T恤</a><a href="" target="_blank">雪纺衫</a><a href="" target="_blank">衬衫</a><a href="" target="_blank">休闲裤</a><a href="" target="_blank">牛仔裤</a><a href="" target="_blank">针织衫</a><a href="" target="_blank">短外套</a><a href="" target="_blank">卫衣</a><a href="" target="_blank">小西装</a><a href="" target="_blank">风衣</a><a href="" target="_blank">毛呢大衣</a><a href="" target="_blank">半身裙</a><a href="" target="_blank">短裤</a><a href="" target="_blank">吊带/背心</a><a href="" target="_blank">打底衫</a><a href="" target="_blank">打底裤</a><a href="" target="_blank">正装裤</a><a href="" target="_blank">马甲</a><a href="" target="_blank">大码女装</a><a href="" target="_blank">中老年女装</a><a href="" target="_blank">真皮皮衣</a><a href="" target="_blank">皮草</a><a href="" target="_blank">羊毛衫</a><a href="" target="_blank">羊绒衫</a><a href="" target="_blank">棉服</a><a href="" target="_blank">羽绒服</a><a href="" target="_blank">仿皮皮衣</a><a href="" target="_blank">加绒裤</a><a href="" target="_blank">婚纱</a><a href="" target="_blank">旗袍/唐装</a><a href="" target="_blank">礼服</a><a href="" target="_blank">设计师/潮牌</a></dd></dl><dl class="fore2"><dt><a href="" target="_blank">男装<i>&gt;</i></a></dt><dd><a href="" target="_blank">衬衫</a><a href="" target="_blank">T恤</a><a href="" target="_blank">牛仔裤</a><a href="" target="_blank">休闲裤</a><a href="" target="_blank">卫衣</a><a href="" target="_blank">针织衫</a><a href="" target="_blank">西服</a><a href="" target="_blank">西裤</a><a href="" target="_blank">POLO衫</a><a href="" target="_blank">羽绒服</a><a href="" target="_blank">西服套装</a><a href="" target="_blank">真皮皮衣</a><a href="" target="_blank">夹克</a><a href="" target="_blank">风衣</a><a href="" target="_blank">卫裤/运动裤</a><a href="" target="_blank">短裤</a><a href="" target="_blank">仿皮皮衣</a><a href="" target="_blank">棉服</a><a href="" target="_blank">马甲/背心</a><a href="" target="_blank">毛呢大衣</a><a href="" target="_blank">羊毛衫</a><a href="" target="_blank">羊绒衫</a><a href="" target="_blank">大码男装</a><a href="" target="_blank">中老年男装</a><a href="" target="_blank">工装</a><a href="" target="_blank">设计师/潮牌</a><a href="" target="_blank">唐装/中山装</a><a href="" target="_blank">加绒裤</a></dd></dl><dl class="fore3"><dt><a href="" target="_blank">内衣<i>&gt;</i></a></dt><dd><a href="" target="_blank">文胸</a><a href="" target="_blank">睡衣/家居服</a><a href="" target="_blank">男式内裤</a><a href="" target="_blank">女式内裤</a><a href="" target="_blank">塑身美体</a><a href="" target="_blank">文胸套装</a><a href="" target="_blank">情侣睡衣</a><a href="" target="_blank">吊带/背心</a><a href="" target="_blank">少女文胸</a><a href="" target="_blank">休闲棉袜</a><a href="" target="_blank">商务男袜</a><a href="" target="_blank">连裤袜/丝袜</a><a href="" target="_blank">美腿袜</a><a href="" target="_blank">打底裤袜</a><a href="" target="_blank">抹胸</a><a href="" target="_blank">内衣配件</a><a href="" target="_blank">大码内衣</a><a href="" target="_blank">打底衫</a><a href="" target="_blank">泳衣</a><a href="" target="_blank">秋衣秋裤</a><a href="" target="_blank">保暖内衣</a><a href="" target="_blank">情趣内衣</a></dd></dl><dl class="fore4"><dt><a href="" target="_blank">配饰<i>&gt;</i></a></dt><dd><a href="" target="_blank">太阳镜</a><a href="" target="_blank">光学镜架/镜片</a><a href="" target="_blank">男士腰带/礼盒</a><a href="" target="_blank">防辐射眼镜</a><a href="" target="_blank">老花镜</a><a href="" target="_blank">女士丝巾/围巾/披肩</a><a href="" target="_blank">男士丝巾/围巾</a><a href="" target="_blank">棒球帽</a><a href="" target="_blank">遮阳帽</a><a href="" target="_blank">鸭舌帽</a><a href="" target="_blank">贝雷帽</a><a href="" target="_blank">礼帽</a><a href="" target="_blank">毛线帽</a><a href="" target="_blank">防晒手套</a><a href="" target="_blank">真皮手套</a><a href="" target="_blank">围巾/手套/帽子套装</a><a href="" target="_blank">遮阳伞/雨伞</a><a href="" target="_blank">女士腰带/礼盒</a><a href="" target="_blank">口罩</a><a href="" target="_blank">假领</a><a href="" target="_blank">毛线/布面料</a><a href="" target="_blank">领带/领结/领带夹</a><a href="" target="_blank">耳罩/耳包</a><a href="" target="_blank">袖扣</a><a href="" target="_blank">钥匙扣</a></dd></dl><dl class="fore5"><dt><a href="" target="_blank">童装童鞋<i>&gt;</i></a></dt><dd><a href="" target="_blank">套装</a><a href="" target="_blank">上衣</a><a href="" target="_blank">运动鞋</a><a href="" target="_blank">裤子</a><a href="" target="_blank">内衣</a><a href="" target="_blank">皮鞋/帆布鞋</a><a href="" target="_blank">亲子装</a><a href="" target="_blank">羽绒服/棉服</a><a href="" target="_blank">运动服</a><a href="" target="_blank">靴子</a><a href="" target="_blank">演出服</a><a href="" target="_blank">裙子</a><a href="" target="_blank">功能鞋</a><a href="" target="_blank">凉鞋</a><a href="" target="_blank">配饰</a></dd></dl></div><div class="item-promotions"><a href="" class="img-link" target="_blank"><img src="img/category/577e364eN86c8f187.jpg" width="168" height="134"></a><a href="" class="img-link" target="_blank"><img src="img/category/577f019cN4ea29161.jpg" width="168" height="134"></a></div></div></div></div></div><div id="navitems"><ul id="navitems-group1"><li class="fore1"><a target="_blank" href="">服装城</a></li><li class="fore2"><a target="_blank" href="">美妆馆</a></li><li class="fore3"><a target="_blank" href="">京东超市</a></li><li class="fore4"><a target="_blank" href="">生鲜</a></li></ul><div class="spacer"></div><ul id="navitems-group2"><li class="fore1"><a target="_blank" href="">全球购</a></li><li class="fore2"><a target="_blank" href="">闪购</a></li><li class="fore3"><a target="_blank" href="">团购</a></li><li class="fore4"><a target="_blank" href="">拍卖</a></li><li class="fore5"><a target="_blank" href="">金融</a></li></ul></div><!--index_ok--><div id="treasure"></div><span class="clr"></span></div></div><script src="js/jquery-2.1.4.js"></script><script src="js/bootstrap.js"></script><script type="text/javascript">(function() {var $ddi = $("#categorys-dd-inner"),$ddid = $ddi.find("div"),$ddr = $("#category-dorpdown-layer"),$ddri = $ddr.find(".item-sub"),index = 0,$ddrr = $ddr.find("#category-item-" + index),id = 0;//鼠标进入左侧栏的一项$ddid.mouseenter(function() {$ddrr.css("display", "none"),$ddrr.removeClass("hover"),$(this).addClass("hover"),index = $(this).data("index"),$ddrr = $ddr.find("#category-item-" + index),$ddrr.css("display", "block"),$ddrr.addClass("hover");});//鼠标离开左侧栏的一项$ddid.mouseleave(function() {index = $(this).data("index");$(this).removeClass("hover");});//鼠标进入右侧$ddri.mouseenter(function() {id = $(this).data("id"),$ddi.find(".fore" + id).addClass("hover");});//鼠标离开右侧$ddri.mouseleave(function() {$ddi.find(".hover").removeClass("hover");});})();</script></body></html>
左侧菜单

实际上，原网站的子菜单是动态创建出来的，这里我们为了方便，把代码“写死”，并且只保留了前五项，如果需要更多的菜单项，复制相应div（左菜单项：#categorys .dd .dd-inner .item 右弹出菜单：#categorys .dd .dorpdown-layer .item-sub）就可以了，同时要修改#categorys .dd 的height属性值（在第99行）。