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

本文介绍了一种模仿京东首页商品菜单列表的实现方法,通过HTML和CSS构建菜单结构,并使用JavaScript实现动态效果。文章详细展示了代码示例,包括菜单项的布局、下拉层展示及隐藏等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前做了一个类似于京东的电商网站项目,同时顺带也“临摹”了一下京东的页面:

登录页:
登录页

首页:
首页

有个词语叫做“照猫画虎”,这个词语太不谦虚,就像“抛玉引砖”一样的狂傲,在电脑屏幕前面对着数量庞大的代码,哪有心情出此豪言,只能说是照虎画猫。很明显,我临摹的页面确实做了许多精简。

进入正题。

京东首页的商品菜单列表,实现起来并不麻烦,只是当初自己在写相应的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行)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值