本文介绍了一种模仿京东首页商品菜单列表的实现方法，通过HTML和CSS构建菜单结构，并使用JavaScript实现动态效果。文章详细展示了代码示例，包括菜单项的布局、下拉层展示及隐藏等功能。
之前做了一个类似于京东的电商网站项目，同时顺带也“临摹”了一下京东的页面：
登录页：
首页：
有个词语叫做“照猫画虎”，这个词语太不谦虚，就像“抛玉引砖”一样的狂傲，在电脑屏幕前面对着数量庞大的代码，哪有心情出此豪言，只能说是照虎画猫。很明显，我临摹的页面确实做了许多精简。
进入正题。
京东首页的商品菜单列表，实现起来并不麻烦，只是当初自己在写相应的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>></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>></i>
</div>
<div class="item fore3" data-index="3">
<h3><a target="_blank" href="">电脑、办公</a></h3>
<i>></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>></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>></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>></i></a>
<a href="" target="_blank">家电城<i>></i></a>
<a href="" target="_blank">智能生活馆<i>></i></a>
<a href="" target="_blank">京东净化馆<i>></i></a>
<a href="" target="_blank">京东帮服务店<i>></i></a>
<a href="" target="_blank">家电众筹馆<i>></i></a>
</div>
</div>
<div class="subitems">
<dl class="fore1"><dt><a href="" target="_blank">大家电<i>></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>></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>></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>></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>></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>></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>></i></a>
<a href="" target="_blank">手机频道<i>></i></a>
<a href="" target="_blank">网上营业厅<i>></i></a>
<a href="" target="_blank">配件城<i>></i></a>
<a href="" target="_blank">影像Club<i>></i></a>
<a href="" target="_blank">以旧换新<i>></i></a>
</div>
</div>
<div class="subitems">
<dl class="fore1"><dt><a href="" target="_blank">手机通讯<i>></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>></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>></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>></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>></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>></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>></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>></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>></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>></i></a>
<a href="" target="_blank">本周热卖<i>></i></a>
<a href="" target="_blank">游戏部落<i>></i></a>
<a href="" target="_blank">GAME+<i>></i></a>
<a href="" target="_blank">装机大师<i>></i></a>
<a href="" target="_blank">办公生活馆<i>></i></a>
</div>
</div>
<div class="subitems">
<dl class="fore1"><dt><a href="" target="_blank">电脑整机<i>></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>></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>></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>></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>></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>></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>></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>></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>></i></a>
<a href="" target="_blank">居家日用<i>></i></a>
<a href="" target="_blank">精品家具<i>></i></a>
<a href="" target="_blank">家装建材<i>></i></a>
<a href="" target="_blank">厨房达人<i>></i></a>
<a href="" target="_blank">装修服务<i>></i></a>
</div>
</div>
<div class="subitems">
<dl class="fore1"><dt><a href="" target="_blank">厨具<i>></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>></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>></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>></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>></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>></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>></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>></i></a>
<a href="" target="_blank">女装<i>></i></a>
<a href="" target="_blank">内衣<i>></i></a>
<a href="" target="_blank">童装童鞋<i>></i></a>
<a href="" target="_blank">国际品牌<i>></i></a>
<a href="" target="_blank">自营服装<i>></i></a>
</div>
</div>
<div class="subitems">
<dl class="fore1"><dt><a href="" target="_blank">女装<i>></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>></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>></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>></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>></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行）。
扫一扫
793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
