jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程

有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图:

我们也可以到这里来查看这款菜单的DEMO演示

接下来还是分析一下源代码,源码由HTML、CSS和jQuery组成,先来看看HTML,东西很多,但结构非常简单:

<div class="sidebar">
  <div class="sidebar_top sidebar_top_tc">全部产品分类</div>
  <div class="sidebar_con">
    <dl class="sidebar_item">
      <dt><i class="sidebar_item_icon01"></i><span>机器设备</span></dt>
      <dd>
        <h3 class=""><a href="#">通用机械设备</a></h3><s></s> 
        <div class="sidebar_popup dis1" style="display: none; ">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">泵与阀门</a></strong>
              <p><span class="linesbg"><a href="#">真空泵</a></span><span class="linesbg"><a href="#">离心泵</a></span><span class="linesbg"><a href="#">计量泵</a></span><span class="linesbg"><a href="#">水泵</a></span><span class="linesbg"><a href="#">油泵</a></span><span class="linesbg"><a href="#">阀门</a></span><span class="linesbg"><a href="#">球阀</a></span><span class="linesbg"><a href="#">安全阀</a></span><span class="linesbg"><a href="#">电磁阀</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">机床</a></strong>
              <p><span class="linesbg"><a href="#">数控机床</a></span><span class="linesbg"><a href="#">金属切削机床</a></span><span class="linesbg"><a href="#">车床</a></span><span class="linesbg"><a href="#">磨床</a></span><span class="linesbg"><a href="#">锻压机床</a></span><span class="linesbg"><a href="#">特种加工机床</a></span><span class="linesbg"><a href="#">机床附件</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">真空</a><a href="#">风机设备</a></strong>
              <p><span class="linesbg"><a href="#">真空获取与应用设备</a></span><span class="linesbg"><a href="#">真空泵</a></span><span class="linesbg"><a href="#">真空镀膜机</a></span><span class="linesbg"><a href="#">风机设备</a></span><span class="linesbg"><a href="#">空气压缩机</a></span><span class="linesbg"><a href="#">风幕机</a></span><span class="linesbg"><a href="#">鼓风机</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">粉碎</a><a href="#">过滤筛分设备</a></strong>
              <p><span class="linesbg"><a href="#">粉碎设备、粉碎机</a></span><span class="linesbg"><a href="#">破碎机</a></span><span class="linesbg"><a href="#">砂磨机</a></span><span class="linesbg"><a href="#">过滤筛分设备</a></span><span class="linesbg"><a href="#">过滤机</a></span><span class="linesbg"><a href="#">离心机</a></span><span class="linesbg"><a href="#">压滤机</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">加热、传热设备</a></strong>
              <p><span class="linesbg"><a href="#">锅炉与原动机</a></span><span class="linesbg"><a href="#">锅炉</a></span><span class="linesbg"><a href="#">内燃机</a></span><span class="linesbg"><a href="#">汽轮机</a></span><span class="linesbg"><a href="#">传热设备</a></span><span class="linesbg"><a href="#">冷凝器</a></span><span class="linesbg"><a href="#">换热器</a></span><span class="linesbg"><a href="#">热处理设备</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">分离</a><a href="#">混合设备</a></strong>
              <p><span class="linesbg"><a href="#">分离设备</a></span><span class="linesbg"><a href="#">浓缩机</a></span><span class="linesbg"><a href="#">分离器</a></span><span class="linesbg"><a href="#">蒸发器</a></span><span class="linesbg"><a href="#">混合设备</a></span><span class="linesbg"><a href="#">搅拌机</a></span><span class="linesbg"><a href="#">混合机</a></span><span class="linesbg"><a href="#">分散机</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">包装机械</a></strong>
              <p><span class="linesbg"><a href="#">灌装机</a></span><span class="linesbg"><a href="#">封口机</a></span><span class="linesbg"><a href="#">贴标机</a></span><span class="linesbg"><a href="#">集装机</a></span><span class="linesbg"><a href="#">喷码机</a></span><span class="linesbg"><a href="#">打号机/线号机</a></span><span class="linesbg"><a href="#">植绒机</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">制冷设备</a></span><span class="linesbg"><a href="#">干燥设备</a></span><span class="linesbg"><a href="#">焊接与切割设备</a></span><span class="linesbg"><a href="#">储运设备</a></span><span class="linesbg"><a href="#">表面处理与涂装设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部通用机械设备</span></a></div>
        </div>
      </dd>
      <dd>
        <h3 class=""><a href="#">行业专用设备</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis2" style="display: none; ">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">工程机械</a></strong>
              <p><span class="linesbg"><a href="#">起重机械</a></span><span class="linesbg"><a href="#">装修机械</a></span><span class="linesbg"><a href="#">混凝土机械</a></span><span class="linesbg"><a href="#">钢筋加工机械</a></span><span class="linesbg"><a href="#">建材机械配件</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">冶金、石油、矿业机械</a></strong>
              <p><span class="linesbg"><a href="#">炼铁设备</a></span><span class="linesbg"><a href="#">采掘设备</a></span><span class="linesbg"><a href="#">粉碎设备</a></span><span class="linesbg"><a href="#">井架</a></span><span class="linesbg"><a href="#">钻井修井设备</a></span><span class="linesbg"><a href="#">地质勘查设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">塑料橡胶机械</a></strong>
              <p><span class="linesbg"><a href="#">注塑机</a></span><span class="linesbg"><a href="#">压塑机</a></span><span class="linesbg"><a href="#">吹塑机</a></span><span class="linesbg"><a href="#">吸塑机</a></span><span class="linesbg"><a href="#">轮胎生产机械</a></span><span class="linesbg"><a href="#">切胶机</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">汽保、维修专用设备</a></strong>
              <p><span class="linesbg"><a href="#">充气机</a></span><span class="linesbg"><a href="#">补胎机</a></span><span class="linesbg"><a href="#">缓冲器</a></span><span class="linesbg"><a href="#">泡沫机</a></span><span class="linesbg"><a href="#">抛光打蜡机</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">服装纺织设备</a></strong>
              <p><span class="linesbg"><a href="#">缝纫机械</a></span><span class="linesbg"><a href="#">洗涤烘干机械</a></span><span class="linesbg"><a href="#">纺织机械</a></span><span class="linesbg"><a href="#">毛皮、制革机械</a></span><span class="linesbg"><a href="#">制鞋机械</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">食品生产机械</a></strong>
              <p><span class="linesbg"><a href="#">小食品加工</a></span><span class="linesbg"><a href="#">厨房设备</a></span><span class="linesbg"><a href="#">饮料机械</a></span><span class="linesbg"><a href="#">糕点加工机械</a></span><span class="linesbg"><a href="#">清洗消毒设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">农业、林业、畜牧、渔业设备</a></strong>
              <p><span class="linesbg"><a href="#">农业机械</a></span><span class="linesbg"><a href="#">林业机械</a></span><span class="linesbg"><a href="#">畜牧养殖机械</a></span><span class="linesbg"><a href="#">农产品初加工机械</a></span><span class="linesbg"><a href="#">渔业机械</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">印刷机械</a></span><span class="linesbg"><a href="#">化工设备</a></span><span class="linesbg"><a href="#">小五金制造设备</a></span><span class="linesbg"><a href="#">制药机械</a></span><span class="linesbg"><a href="#">游乐游艺设施</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部行业专用设备</span></a></div>
        </div>
      </dd>
      <dd>
        <h3 class=""><a href="#">建筑设备</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis3" style="display: none; ">
          <div class="sidebar_popup_box">
            <div class="sidebar_popup_class clearfix">
              <div class="sidebar_popup_item"> <strong><a href="#">采暖通风设备</a></strong>
                <p><span class="linesbg"><a href="#">暖气片</a></span><span class="linesbg"><a href="#">暖风机</a></span><span class="linesbg"><a href="#">壁炉</a></span><span class="linesbg"><a href="#">采暖部件</a></span><span class="more"><a href="#">更多</a></span></p>
              </div>
              <div class="sidebar_popup_item"> <strong><a href="#">管道系统</a></strong>
                <p><span class="linesbg"><a href="#">上水系统</a></span><span class="linesbg"><a href="#">排水系统</a></span><span class="linesbg"><a href="#">冷热水系统</a></span><span class="linesbg"><a href="#">燃气系统</a></span><span class="linesbg"><a href="#">管道辅助材料</a></span><span class="linesbg"><a href="#">其他管道系统</a></span></p>
              </div>
              <div class="sidebar_popup_item"> <strong><a href="#">给排水设备</a></strong>
                <p><span class="linesbg"><a href="#">冷却塔</a></span><span class="linesbg"><a href="#">水处理设备</a></span><span class="linesbg"><a href="#">加热贮热设备</a></span><span class="linesbg"><a href="#">检查井</a></span><span class="linesbg"><a href="#">加压调节贮存设备</a></span><span class="more"><a href="#">更多</a></span></p>
              </div>
              <div class="sidebar_popup_item"> <strong><a href="#">空气调节、净化设备</a></strong>
                <p><span class="linesbg"><a href="#">组合式空调机组</a></span><span class="linesbg"><a href="#">加湿设备</a></span><span class="linesbg"><a href="#">除湿设备</a></span><span class="linesbg"><a href="#">空气过滤器</a></span><span class="linesbg"><a href="#">空气净化器</a></span><span class="more"><a href="#">更多</a></span></p>
              </div>
              <div class="sidebar_popup_item"> <strong><a href="#">综合布线与光纤设备</a></strong>
                <p><span class="linesbg"><a href="#">布线工具</a></span><span class="linesbg"><a href="#">光纤线缆</a></span><span class="linesbg"><a href="#">光纤接头</a></span><span class="linesbg"><a href="#">网线</a></span><span class="linesbg"><a href="#">配线架</a></span><span class="more"><a href="#">更多</a></span></p>
              </div>
              <div class="sidebar_popup_item"> <strong><a href="#">安防监控系统</a></strong>
                <p><span class="linesbg"><a href="#">智能卡</a></span><span class="linesbg"><a href="#">视频监控系统</a></span><span class="linesbg"><a href="#">门禁考勤系统</a></span><span class="linesbg"><a href="#">燃气报警器</a></span><span class="linesbg"><a href="#">防盗报警系统</a></span><span class="more"><a href="#">更多</a></span></p>
              </div>
              <div class="sidebar_popup_item nobg"> <strong><a href="#">停车场设备</a></strong>
                <p><span class="linesbg"><a href="#">智能停车场管理系统</a></span><span class="linesbg"><a href="#">机械式停车设备</a></span><span class="linesbg"><a href="#">读卡机</a></span><span class="linesbg"><a href="#">道闸/挡车器</a></span><span class="more"><a href="#">更多</a></span></p>
              </div>
              <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
                <p><span class="linesbg"><a href="#">消防设备</a></span><span class="linesbg"><a href="#">电梯和自动扶梯</a></span><span class="linesbg"><a href="#">智能家居产品</a></span><span class="more"><a href="#">更多</a></span></p>
              </div>
            </div>
            <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部建筑设备</span></a></div>
          </div>
        </div>
      </dd>
      <dd>
        <h3 class=""><a href="#">电气与能源设备</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis4" style="display: none; ">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">发电机</a><a href="#">电动机</a></strong>
              <p><span class="linesbg"><a href="#">发电机及发电机组</a></span><span class="linesbg"><a href="#">移动电站</a></span><span class="linesbg"><a href="#">微电机</a></span><span class="linesbg"><a href="#">直流电动机</a></span><span><a href="#">异步电动机</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">输配电设备</a><a href="#">电气成套设备</a></strong>
              <p><span class="linesbg"><a href="#">电力变压器</a></span><span class="linesbg"><a href="#">电压互感器</a></span><span class="linesbg"><a href="#">电流互感器</a></span><span class="linesbg"><a href="#">电源屏</a></span><span><a href="#">配电装置</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电源装置</a></strong>
              <p><span class="linesbg"><a href="#">开关电源</a></span><span class="linesbg"><a href="#">模块电源</a></span><span class="linesbg"><a href="#">应急电源/EPS</a></span><span class="linesbg"><a href="#">高压电源</a></span><span class="linesbg"><a href="#">变频电源</a></span><span class="linesbg"><a href="#">线性电源</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">高压电器</a><a href="#">低压电器</a></strong>
              <p><span class="linesbg"><a href="#">高压断路器</a></span><span class="linesbg"><a href="#">高压熔断器</a></span><span class="linesbg"><a href="#">隔离开关</a></span><span class="linesbg"><a href="#">低压断路器</a></span><span class="linesbg"><a href="#">接触器</a></span><span><a href="#">控制设备</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电工仪器仪表</a></strong>
              <p><span class="linesbg"><a href="#">万用表</a></span><span class="linesbg"><a href="#">电能表</a></span><span class="linesbg"><a href="#">电阻测量仪表</a></span><span class="linesbg"><a href="#">电阻箱</a></span><span class="linesbg"><a href="#">电桥</a></span><span class="linesbg"><a href="#">电压测量仪表</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">节煤设备</a></strong>
              <p><span class="linesbg"><a href="#">节煤设备</a></span><span class="linesbg"><a href="#">节水设备</a></span><span class="linesbg"><a href="#">节电设备</a></span><span class="linesbg"><a href="#">节油设备</a></span><span class="linesbg"><a href="#">其他节能设备</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">燃气设备</a></strong>
              <p><span class="linesbg"><a href="#">气化器</a></span><span class="linesbg"><a href="#">工业燃气炉</a></span><span class="linesbg"><a href="#">工业燃气报警器</a></span><span class="linesbg"><a href="#">燃烧器</a></span><span class="linesbg"><a href="#">加气站设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">电力电子器件</a></span><span class="linesbg"><a href="#">新能源设备</a></span><span class="linesbg"><a href="#">防雷设备</a></span><span class="linesbg"><a href="#">沼气设备</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部电气与能源设备</span></a></div>
        </div>
      </dd>
      <dd>
        <h3 class=""><a href="#">仪器仪表</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis5" style="display: none; ">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">量具量仪</a></strong>
              <p><span class="linesbg"><a href="#">量尺</a></span><span class="linesbg"><a href="#">卡尺</a></span><span class="linesbg"><a href="#">角度尺</a></span><span class="linesbg"><a href="#">深度尺</a></span><span class="linesbg"><a href="#">千分尺</a></span><span class="linesbg"><a href="#">量规</a></span><span class="linesbg"><a href="#">高度计、高度尺</a></span><span class="linesbg"><a href="#">平板</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">光学仪器</a></strong>
              <p><span class="linesbg"><a href="#">望远镜</a></span><span class="linesbg"><a href="#">放大镜</a></span><span class="linesbg"><a href="#">光学显微镜</a></span><span class="linesbg"><a href="#">电子显微镜</a></span><span class="linesbg"><a href="#">天文仪器</a></span><span class="linesbg"><a href="#">光学测量仪器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">分析仪器</a></strong>
              <p><span class="linesbg"><a href="#">元素分析仪器</a></span><span class="linesbg"><a href="#">水质分析仪/COD检测仪</a></span><span class="linesbg"><a href="#">气体分析仪器</a></span><span class="linesbg"><a href="#">光学分析仪器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">衡器</a></strong>
              <p><span class="linesbg"><a href="#">电子秤</a></span><span class="linesbg"><a href="#">定量秤</a></span><span class="linesbg"><a href="#">台秤</a></span><span class="linesbg"><a href="#">吊秤</a></span><span class="linesbg"><a href="#">配料秤</a></span><span class="linesbg"><a href="#">汽车衡</a></span><span class="linesbg"><a href="#">地磅/地上衡</a></span><span class="linesbg"><a href="#">轨道衡</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">试验机</a></strong>
              <p><span class="linesbg"><a href="#">平衡机</a></span><span class="linesbg"><a href="#">硬度计</a></span><span class="linesbg"><a href="#">引伸机</a></span><span class="linesbg"><a href="#">拉力试验机</a></span><span class="linesbg"><a href="#">汽车试验设备</a></span><span class="linesbg"><a href="#">疲劳试验机</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">计量仪表</a></strong>
              <p><span class="linesbg"><a href="#">水表</a></span><span class="linesbg"><a href="#">电能表</a></span><span class="linesbg"><a href="#">燃气表</a></span><span class="linesbg"><a href="#">热能表</a></span><span class="linesbg"><a href="#">计数器</a></span><span class="linesbg"><a href="#">温湿度仪表</a></span><span class="linesbg"><a href="#">压力测量仪表</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">电工仪器仪表</a></strong>
              <p><span class="linesbg"><a href="#">万用表</a></span><span class="linesbg"><a href="#">摇表</a></span><span class="linesbg"><a href="#">钳形表</a></span><span class="linesbg"><a href="#">电桥</a></span><span class="linesbg"><a href="#">电阻箱</a></span><span class="linesbg"><a href="#">电能表</a></span><span class="linesbg"><a href="#">电压测量仪表</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">电子测量仪器</a></strong>
              <p><span class="linesbg"><a href="#">示波器</a></span><span class="linesbg"><a href="#">场强仪</a></span><span class="linesbg"><a href="#">LCR测量仪</a></span><span class="linesbg"><a href="#">参数测量仪</a></span><span class="linesbg"><a href="#">元件测试仪</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部仪器仪表</span></a></div>
        </div>
      </dd>
      <dd>
        <h3 class=""><a href="#">网络安防/通信广电设备</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis6" style="display: none; ">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">网络设备</a></strong>
              <p><span class="linesbg"><a href="#">网络交换机</a></span><span class="linesbg"><a href="#">磁盘阵列</a></span><span class="linesbg"><a href="#">网关</a></span><span class="linesbg"><a href="#">VPN设备</a></span><span class="linesbg"><a href="#">路由器</a></span><span class="linesbg"><a href="#">网卡</a></span><span class="linesbg"><a href="#">modem/调制解调器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">通信设备</a></strong>
              <p><span class="linesbg"><a href="#">无线电导航设备</a></span><span class="linesbg"><a href="#">传输设备</a></span><span class="linesbg"><a href="#">交换设备</a></span><span class="linesbg"><a href="#">终端设备</a></span><span class="linesbg"><a href="#">移动通信设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">无线网络设备</a></strong>
              <p><span class="linesbg"><a href="#">无线路由器</a></span><span class="linesbg"><a href="#">无线AP</a></span><span class="linesbg"><a href="#">无线上网卡</a></span><span class="linesbg"><a href="#">无线网卡</a></span><span class="linesbg"><a href="#">其它无线网络设备</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">网络管理、安全设备</a></strong>
              <p><span class="linesbg"><a href="#">物理安全隔离设备</a></span><span class="linesbg"><a href="#">负载均衡器</a></span><span class="linesbg"><a href="#">流量管理</a></span><span class="linesbg"><a href="#">入侵监测设备</a></span><span class="linesbg"><a href="#">无线安全保密设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">综合布线</a></strong>
              <p><span class="linesbg"><a href="#">光纤线缆</a></span><span class="linesbg"><a href="#">双纹线</a></span><span class="linesbg"><a href="#">光纤跳线</a></span><span class="linesbg"><a href="#">水晶头</a></span><span class="linesbg"><a href="#">光纤耦合器</a></span><span class="linesbg"><a href="#">配线架</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">广播电视设备</a></strong>
              <p><span class="linesbg"><a href="#">音频节目制作与播控设备</a></span><span class="linesbg"><a href="#">音响录音设备</a></span><span class="linesbg"><a href="#">视频节目制作和播控设备</a></span><span class="linesbg"><a href="#">显示设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">安防监控系统</a></strong>
              <p><span class="linesbg"><a href="#">防盗报警系统/器材</a></span><span class="linesbg"><a href="#">视频监控系统</a></span><span class="linesbg"><a href="#">智能卡</a></span><span class="linesbg"><a href="#">电子巡更产品</a></span><span class="linesbg"><a href="#">安检防爆器材</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部网络安防/通信广电设备</span></a></div>
        </div>
      </dd>
      <dd>
        <h3 class=""><a href="#">电脑/办公设备</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis7" style="display: none; ">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">办公耗材</a></strong>
              <p><span class="linesbg"><a href="#">硒鼓、粉盒</a></span><span class="linesbg"><a href="#">碳粉</a></span><span class="linesbg"><a href="#">墨盒</a></span><span class="linesbg"><a href="#">墨水</a></span><span class="linesbg"><a href="#">鼓芯</a></span><span class="linesbg"><a href="#">考勤卡</a></span><span class="linesbg"><a href="#">过塑膜</a></span><span class="linesbg"><a href="#">装订夹条</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">办公家具</a></strong>
              <p><span class="linesbg"><a href="#">办公桌/电脑桌</a></span><span class="linesbg"><a href="#">办公椅/电脑椅</a></span><span class="linesbg"><a href="#">保险柜</a></span><span class="linesbg"><a href="#">办公沙发</a></span><span class="linesbg"><a href="#">文件柜/档案柜/办公柜</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">复印、打印、扫描设备</a></strong>
              <p><span class="linesbg"><a href="#">刻字机</a></span><span class="linesbg"><a href="#">扫描仪</a></span><span class="linesbg"><a href="#">复印机</a></span><span class="linesbg"><a href="#">喷绘机</a></span><span class="linesbg"><a href="#">传真机</a></span><span class="linesbg"><a href="#">高拍仪</a></span><span class="linesbg"><a href="#">胶印机</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">整理、装订设备</a></strong>
              <p><span class="linesbg"><a href="#">订书机/器</a></span><span class="linesbg"><a href="#">封装机</a></span><span class="linesbg"><a href="#">碎纸机</a></span><span class="linesbg"><a href="#">覆膜机</a></span><span class="linesbg"><a href="#">塑封机/过塑机</a></span><span class="linesbg"><a href="#">冷裱机</a></span><span class="linesbg"><a href="#">折纸机</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">投影、显示设备</a></strong>
              <p><span class="linesbg"><a href="#">投影机/投影仪</a></span><span class="linesbg"><a href="#">投影幕布</a></span><span class="linesbg"><a href="#">幻灯机</a></span><span class="linesbg"><a href="#">激光笔</a></span><span class="linesbg"><a href="#">液晶显示屏</a></span><span class="linesbg"><a href="#">电子白板</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">办公通讯设备</a></strong>
              <p><span class="linesbg"><a href="#">电话会议</a></span><span class="linesbg"><a href="#">录音电话机</a></span><span class="linesbg"><a href="#">集团电话</a></span><span class="linesbg"><a href="#">网络电话</a></span><span class="linesbg"><a href="#">固定电话</a></span><span class="linesbg"><a href="#">短信系统</a></span><span class="linesbg"><a href="#">声讯系统</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">行政、财务设备</a></strong>
              <p><span class="linesbg"><a href="#">点钞机</a></span><span class="linesbg"><a href="#">验钞机</a></span><span class="linesbg"><a href="#">考勤机</a></span><span class="linesbg"><a href="#">现金出纳机</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">电脑配件与外设</a></strong>
              <p><span class="linesbg"><a href="#">液晶显示器</a></span><span class="linesbg"><a href="#">主板</a></span><span class="linesbg"><a href="#">机箱</a></span><span class="linesbg"><a href="#">硬盘</a></span><span class="linesbg"><a href="#">电源</a></span><span class="linesbg"><a href="#">内存</a></span><span class="linesbg"><a href="#">CPU</a></span><span class="linesbg"><a href="#">手写板</a></span><span class="linesbg"><a href="#">鼠标</a></span><span class="linesbg"><a href="#">键盘</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部电脑/办公设备</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">交通运输</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis8">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">机动车</a></strong>
              <p><span class="linesbg"><a href="#">货车</a></span> <span class="linesbg"><a href="#">客车</a></span> <span class="linesbg"><a href="#">电车</a></span> <span class="linesbg"><a href="#">摩托车</a></span> <span class="linesbg"><a href="#">牵引车</a></span> <span class="linesbg"><a href="#">拖拉机</a></span> <span class="linesbg"><a href="#">专用汽车</a></span> <span class="more"><a href="#">更多</a></span></p>

            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电动车</a></strong>
              <p>span class="linesbg"><a href="#">电动汽车</a></span><span class="linesbg"><a href="#">电动自行车</a></span><span class="linesbg"><a href="#">电动三轮车</a></span><span class="linesbg"><a href="#">电瓶车</a></span><span class="linesbg"><a href="#">高尔夫球车</a></span><span class="linesbg"><a href="#">电动滑板车</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">非机动车</a></strong>
              <p><span class="linesbg"><a href="#">自行车</a></span><span class="linesbg"><a href="#">三轮车</a></span><span class="linesbg"><a href="#">电动摩托车</a></span><span class="linesbg"><a href="#">电动三轮车</a></span><span class="linesbg"><a href="#">手推车</a></span><span class="linesbg"><a href="#">轮椅</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">非机动车配件</a></strong>
              <p><span class="linesbg"><a href="#">车架</a></span><span class="linesbg"><a href="#">车轴</a></span><span class="linesbg"><a href="#">车闸</a></span><span class="linesbg"><a href="#">轮胎</a></span><span class="linesbg"><a href="#">轮毂</a></span><span class="linesbg"><a href="#">电动车电机</a></span><span class="linesbg"><a href="#">电动车控制器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">加油站设备</a></strong>
              <p><span class="linesbg"><a href="#">加油机</a></span><span class="linesbg"><a href="#">加油枪</a></span><span class="linesbg"><a href="#">油罐</a></span><span class="linesbg"><a href="#">油漏斗</a></span><span class="linesbg"><a href="#">加油管</a></span><span class="linesbg"><a href="#">加油车</a></span><span class="linesbg"><a href="#">流量计</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">停车场设备</a></strong>
              <p><span class="linesbg"><a href="#">智能停车场管理系统</a></span><span class="linesbg"><a href="#">机械式停车设备</a></span><span class="linesbg"><a href="#">读卡机</a></span><span class="linesbg"><a href="#">道闸/挡车器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">道路交通管理设施</a></strong>
              <p><span class="linesbg"><a href="#">路障</a></span><span class="linesbg"><a href="#">防护网</a></span><span class="linesbg"><a href="#">反光材料</a></span><span class="linesbg"><a href="#">防撞设施</a></span><span class="linesbg"><a href="#">道路减速设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">港口装卸设备</a></span><span class="linesbg"><a href="#">轨道铁路线路机械</a></span><span class="linesbg"><a href="#">船舶及航道设备</a></span><span class="linesbg"><a href="#">机场专用设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部交通运输</span></a></div>
        </div>
      </dd>
    </dl>
    <dl class="sidebar_item">
      <dt><i class="sidebar_item_icon02"></i><span>物料耗材</span></dt>
      <dd>
        <h3><a href="#">原料辅料/初加工材料</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis9">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">矿业</a><a href="#">钢铁冶金</a><a href="#">有色金属</a></strong>
              <p><span class="linesbg"><a href="#">煤炭</a></span><span class="linesbg"><a href="#">有色金属矿产</a></span><span class="linesbg"><a href="#">不锈钢</a></span><span class="linesbg"><a href="#">建筑钢材</a></span><span><a href="#">有色金属及加工材</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">橡胶、塑料</a><a href="#">催化剂、助剂</a></strong>
              <p><span class="linesbg"><a href="#">塑料制品</a></span><span class="linesbg"><a href="#">橡胶制品</a></span><span class="linesbg"><a href="#">轮胎</a></span><span class="linesbg"><a href="#">母料</a></span><span><a href="#">催化剂、助剂、填充剂</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">纸业</a></strong>
              <p><span class="linesbg"><a href="#">木纸浆</a></span><span class="linesbg"><a href="#">非木纤维纸浆</a></span><span class="linesbg"><a href="#">废纸纸浆</a></span><span class="linesbg"><a href="#">文化印刷用纸</a></span><span class="linesbg"><a href="#">工业用纸</a></span><span class="linesbg"><a href="#">印刷辅料</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">化学原料</a><a href="#">精细化学品</a></strong>
              <p><span class="linesbg"><a href="#">有机、无机化学原料</a></span><span class="linesbg"><a href="#">食品添加剂</a></span><span class="linesbg"><a href="#">油墨</a></span><span class="linesbg"><a href="#">涂料</a></span><span class="linesbg"><a href="#">染料</a></span><span class="linesbg"><a href="#">化学试剂</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">纺织皮革</a><a href="#">纤维</a><a href="#">商标</a><a href="#">首饰材料</a></strong>
              <p><span class="linesbg"><a href="#">面料</a></span><span class="linesbg"><a href="#">皮革</a></span><span class="linesbg"><a href="#">纺织服装辅料</a></span><span class="linesbg"><a href="#">纺织制品</a></span><span class="linesbg"><a href="#">纤维</a></span><span class="linesbg"><a href="#">商标</a></span><span><a href="#">首饰辅料</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">燃料</a><a href="#">石油制品</a><a href="#">煤化工业品</a></strong>
              <p><span class="linesbg"><a href="#">煤炭</a></span><span class="linesbg"><a href="#">燃料</a></span><span class="linesbg"><a href="#">石蜡</a></span><span class="linesbg"><a href="#">石油制品</a></span><span class="linesbg"><a href="#">沥青</a></span><span class="linesbg"><a href="#">石油燃料</a></span><span class="linesbg"><a href="#">润滑油脂</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">农产品</a><a href="#">动物与林产化学品</a></strong>
              <p><span class="linesbg"><a href="#">农产品</a></span><span class="linesbg"><a href="#">中药材</a></span><span class="linesbg"><a href="#">农药</a></span><span class="linesbg"><a href="#">化肥、肥料</a></span><span class="linesbg"><a href="#">动物与林产化学品</a></span><span class="linesbg"><a href="#">明胶</a></span><span class="linesbg"><a href="#">农用物资</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">包装材料及容器</a></span><span class="linesbg"><a href="#">吸附干燥剂</a></span><span class="linesbg"><a href="#">电光源材料</a></span><span class="linesbg"><a href="#">喷涂溅射材料</a></span><span class="linesbg"><a href="#">医药及生化制品</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部原料辅料/初加工材料</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">建材与装饰材料</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis10">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">建筑钢材、有色建材</a><a href="#">管材、管件</a></strong>
              <p><span class="linesbg"><a href="#">钢筋</a></span><span class="linesbg"><a href="#">盘条</a></span><span class="linesbg"><a href="#">型钢</a></span><span class="linesbg"><a href="#">建筑有色金属</a></span><span class="linesbg"><a href="#">管件</a></span><span class="linesbg"><a href="#">橡胶管</a></span><span class="linesbg"><a href="#">不锈钢管</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">玻璃</a><a href="#">陶瓷瓷砖</a></strong>
              <p><span class="linesbg"><a href="#">平板玻璃</a></span><span class="linesbg"><a href="#">装饰玻璃</a></span><span class="linesbg"><a href="#">建筑节能玻璃</a></span><span class="linesbg"><a href="#">陶瓷板</a></span><span class="linesbg"><a href="#">陶瓷铺地砖</a></span><span><a href="#">马赛克</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong>功能材料</strong>
              <p><span class="linesbg"><a href="#">保温吸声材料</a></span><span class="linesbg"><a href="#">防火耐火材料</a></span><span class="linesbg"><a href="#">沥青</a></span><span class="linesbg"><a href="#">防水材料</a></span><span class="linesbg"><a href="#">耐腐蚀、防辐射材料</a></span><span class="linesbg"><a href="#">油毡</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">水泥</a><a href="#">石材</a><a href="#">砂子</a><a href="#">砖、瓦</a></strong>
              <p><span class="linesbg"><a href="#">水泥</a></span><span class="linesbg"><a href="#">混凝土</a></span><span class="linesbg"><a href="#">砂浆</a></span><span class="linesbg"><a href="#">天然大理石</a></span><span class="linesbg"><a href="#">砂子</a></span><span class="linesbg"><a href="#">石灰</a></span><span class="linesbg"><a href="#">粘土砖</a></span><span><a href="#">铺地砖</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">水暖卫浴</a><a href="#">厨房橱柜</a></strong>
              <p><span class="linesbg"><a href="#">水暖卫浴五金配件</a></span><span class="linesbg"><a href="#">水槽</a></span><span class="linesbg"><a href="#">洗面盆</a></span><span class="linesbg"><a href="#">整体厨房</a></span><span class="linesbg"><a href="#">整体橱柜</a></span><span class="linesbg"><a href="#">橱柜五金</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">门窗、楼梯</a><a href="#">灯具灯饰</a></strong>
              <p><span class="linesbg"><a href="#"></a></span><span class="linesbg"><a href="#"></a></span><span class="linesbg"><a href="#">楼梯</a></span><span class="linesbg"><a href="#">门窗五金</a></span><span class="linesbg"><a href="#">手电筒</a></span><span class="linesbg"><a href="#">LED灯具</a></span><span class="linesbg"><a href="#">室内灯具</a></span><span class="linesbg"><a href="#">室外灯具</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">绿化</a><a href="#">花卉</a><a href="#">园林</a><a href="#">水体</a></strong>
              <p><span class="linesbg"><a href="#">草坪</a></span><span class="linesbg"><a href="#">灌木</a></span><span class="linesbg"><a href="#">乔木</a></span><span class="linesbg"><a href="#">盆景</a></span><span class="linesbg"><a href="#">鲜花</a></span><span class="linesbg"><a href="#">环卫设施</a></span><span class="linesbg"><a href="#">喷泉设备</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">金属结构体</a></span><span class="linesbg"><a href="#">建筑胶粘剂</a></span><span class="linesbg"><a href="#">装饰装修材料</a></span><span class="linesbg"><a href="#">施工材料</a></span><span class="linesbg"><a href="#">建筑涂料</a></span><span class="linesbg"><a href="#">结构板材</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部建材与装饰材料</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">五金零部件/备品备件</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis11">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">通用五金配件</a><a href="#">模具五金配件</a></strong>
              <p><span class="linesbg"><a href="#">滑轨</a></span><span class="linesbg"><a href="#">滑轮</a></span><span class="linesbg"><a href="#">脚轮、万向轮</a></span><span class="linesbg"><a href="#">司筒</a></span><span class="linesbg"><a href="#">外导柱组件</a></span><span class="linesbg"><a href="#">钢珠套</a></span><span class="linesbg"><a href="#">冲头</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">紧固件和连接件</a></strong>
              <p><span class="linesbg"><a href="#">螺栓</a></span><span class="linesbg"><a href="#">螺钉/螺丝钉</a></span><span class="linesbg"><a href="#">螺母</a></span><span class="linesbg"><a href="#">铆钉</a></span><span class="linesbg"><a href="#">钉子</a></span><span class="linesbg"><a href="#">垫圈</a></span><span class="linesbg"><a href="#">挡圈</a></span><span class="linesbg"><a href="#">卡圈</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">管件</a></strong>
              <p><span class="linesbg"><a href="#">弯头</a></span><span class="linesbg"><a href="#">封头</a></span><span class="linesbg"><a href="#">管塞</a></span><span class="linesbg"><a href="#">管套</a></span><span class="linesbg"><a href="#">分水器</a></span><span class="linesbg"><a href="#">法兰</a></span><span class="linesbg"><a href="#">接头</a></span><span class="linesbg"><a href="#">三通四通</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电热元件、装置</a></strong>
              <p><span class="linesbg"><a href="#">电热丝</a></span><span class="linesbg"><a href="#">电热管</a></span><span class="linesbg"><a href="#">电热板</a></span><span class="linesbg"><a href="#">电热片</a></span><span class="linesbg"><a href="#">电热器</a></span><span class="linesbg"><a href="#">热电阻</a></span><span class="linesbg"><a href="#">电热铸件</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">传动件</a><a href="#">轴承</a><a href="#">机床附件</a></strong>
              <p><span class="linesbg"><a href="#">齿轮</a></span><span class="linesbg"><a href="#">传动带</a></span><span class="linesbg"><a href="#">滚动轴承</a></span><span class="linesbg"><a href="#">刀架</a></span><span class="linesbg"><a href="#">工业皮带</a></span><span><a href="#">机床工作台</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">液压元件</a><a href="#">气动元件</a></strong>
              <p><span class="linesbg"><a href="#">气缸</a></span><span class="linesbg"><a href="#">液压泵</a></span><span class="linesbg"><a href="#">液压接头</a></span><span class="linesbg"><a href="#">液压管件</a></span><span class="linesbg"><a href="#">气动马达</a></span><span><a href="#">气动接头</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">过滤件</a><a href="#">密封件</a><a href="#">减震件</a></strong>
              <p><span class="linesbg"><a href="#">筛网</a></span><span class="linesbg"><a href="#">滤筒</a></span><span class="linesbg"><a href="#">滤料</a></span><span class="linesbg"><a href="#">密封条</a></span><span class="linesbg"><a href="#">油封</a></span><span class="linesbg"><a href="#">减震圈</a></span><span class="linesbg"><a href="#">密封垫板</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">家具橱柜五金</a></span><span class="linesbg"><a href="#">门窗五金</a></span><span class="linesbg"><a href="#">水暖卫浴五金</a></span><span class="linesbg"><a href="#">服装箱包五金</a></span><span class="linesbg"><a href="#">锁具</a></span><span class="linesbg"><a href="#">弹簧</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部五金零部件/备品备件</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">电子元器件</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis12">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">集成电路</a></strong>
              <p><span class="linesbg"><a href="#">LED芯片</a></span><span class="linesbg"><a href="#">触发器</a></span><span class="linesbg"><a href="#">门电路</a></span><span class="linesbg"><a href="#">稳定电路</a></span><span class="linesbg"><a href="#">线性电路</a></span><span class="linesbg"><a href="#">功放电路</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">二极管</a><a href="#">三极管</a></strong>
              <p><span class="linesbg"><a href="#">LED</a></span><span class="linesbg"><a href="#">二极管</a></span><span class="linesbg"><a href="#">开关二极管</a></span><span class="linesbg"><a href="#">三极管</a></span><span class="linesbg"><a href="#">场效应管</a></span><span class="linesbg"><a href="#">稳压二极管</a></span><span class="linesbg"><a href="#">整流二极管</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">连接器</a></strong>
              <p><span class="linesbg"><a href="#">端子</a></span><span class="linesbg"><a href="#">插头</a></span><span class="linesbg"><a href="#">插座</a></span><span class="linesbg"><a href="#">接线座</a></span><span class="linesbg"><a href="#">接线板</a></span><span class="linesbg"><a href="#">牛角</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电阻</a><a href="#">电容</a><a href="#">电感</a></strong>
              <p><span class="linesbg"><a href="#">安规电容</a></span><span class="linesbg"><a href="#">热敏电阻器</a></span><span class="linesbg"><a href="#">功率电感</a></span><span class="linesbg"><a href="#">固定电阻器</a></span><span><a href="#">电子设备用互感器</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">传感器</a></strong>
              <p><span class="linesbg"><a href="#">温度传感器</a></span><span class="linesbg"><a href="#">压力传感器</a></span><span class="linesbg"><a href="#">光电传感器</a></span><span class="linesbg"><a href="#">霍尔传感器</a></span><span class="linesbg"><a href="#">电压传感器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">保护器件</a></strong>
              <p><span class="linesbg"><a href="#">抑制器</a></span><span class="linesbg"><a href="#">保险丝管</a></span><span class="linesbg"><a href="#">保险丝/熔断器</a></span><span class="linesbg"><a href="#">熔断电阻器/保险电阻</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">电力集成器件</a></strong>
              <p><span class="linesbg"><a href="#">稳压器</a></span><span class="linesbg"><a href="#">调压器</a></span><span class="linesbg"><a href="#">整流器</a></span><span class="linesbg"><a href="#">变频器</a></span><span class="linesbg"><a href="#">电力调整器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">显示器件</a></span><span class="linesbg"><a href="#">光电器件</a></span><span class="linesbg"><a href="#">电子电路散热元件</a></span><span class="linesbg"><a href="#">温敏元件</a></span><span class="linesbg"><a href="#">压敏元件</a></span><span class="linesbg"><a href="#">湿敏元件</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部电子元器件</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">电工电料/线缆照明</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis13">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">电工电料</a></strong>
              <p><span class="linesbg"><a href="#">电工开关</a></span><span class="linesbg"><a href="#">插头</a></span><span class="linesbg"><a href="#">固定插座</a></span><span class="linesbg"><a href="#">电线管</a></span><span class="linesbg"><a href="#">线槽</a></span><span class="linesbg"><a href="#">线扣</a></span><span class="linesbg"><a href="#">电工电料配件</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电线电缆</a></strong>
              <p><span class="linesbg"><a href="#">裸电线</a></span><span class="linesbg"><a href="#">绕组线</a></span><span class="linesbg"><a href="#">电力电缆</a></span><span class="linesbg"><a href="#">电子线</a></span><span class="linesbg"><a href="#">通信数据线缆</a></span><span class="linesbg"><a href="#">电线电缆附件</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">综合布线与光纤设备</a></strong>
              <p><span class="linesbg"><a href="#">网线</a></span><span class="linesbg"><a href="#">布线工具</a></span><span class="linesbg"><a href="#">光纤线缆</a></span><span class="linesbg"><a href="#">光纤接头</a></span><span class="linesbg"><a href="#">光纤耦合器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">绝缘材料</a></strong>
              <p><span class="linesbg"><a href="#">绝缘纸</a></span><span class="linesbg"><a href="#">绝缘子</a></span><span class="linesbg"><a href="#">绝缘套管</a></span><span class="linesbg"><a href="#">绝缘带</a></span><span class="linesbg"><a href="#">绝缘板</a></span><span class="linesbg"><a href="#">电工绝缘胶带</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电光源</a><a href="#">电光源材料</a></strong>
              <p><span class="linesbg"><a href="#">白炽灯</a></span><span class="linesbg"><a href="#">节能灯</a></span><span class="linesbg"><a href="#">日光灯</a></span><span class="linesbg"><a href="#">芯柱</a></span><span class="linesbg"><a href="#">LED</a></span><span class="linesbg"><a href="#">LED灯珠</a></span><span class="linesbg"><a href="#">灯丝</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">灯具灯饰</a></strong>
              <p><span class="linesbg"><a href="#">手电筒</a></span><span class="linesbg"><a href="#">室内灯具</a></span><span class="linesbg"><a href="#">室外灯具</a></span><span class="linesbg"><a href="#">LED灯具</a></span><span class="linesbg"><a href="#">民族、节日灯饰</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">灯具灯饰</a></strong>
              <p><span class="linesbg"><a href="#">灯头</a></span><span class="linesbg"><a href="#">灯座</a></span><span class="linesbg"><a href="#">灯柱灯杆</a></span><span class="linesbg"><a href="#">光源器</a></span><span class="linesbg"><a href="#">灯罩</a></span><span class="linesbg"><a href="#">灯箱</a></span><span class="linesbg"><a href="#">触发器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">电池</a></strong>
              <p><span class="linesbg"><a href="#">原电池/干电池</a></span><span class="linesbg"><a href="#">锂电池</a></span><span class="linesbg"><a href="#">纽扣电池</a></span><span class="linesbg"><a href="#">蓄电池</a></span><span class="linesbg"><a href="#">光电池</a></span><span class="linesbg"><a href="#">标准电池</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部电工电料/线缆照明</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">工具</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis14">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">通用手工工具</a></strong>
              <p><span class="linesbg"><a href="#"></a></span><span class="linesbg"><a href="#"></a></span><span class="linesbg"><a href="#">钳类</a></span><span class="linesbg"><a href="#">锤子</a></span><span class="linesbg"><a href="#">斧子</a></span><span class="linesbg"><a href="#">剪子</a></span><span class="linesbg"><a href="#">扳手</a></span><span class="linesbg"><a href="#">扭力扳手</a></span><span class="linesbg"><a href="#">螺丝刀</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电动工具</a></strong>
              <p><span class="linesbg"><a href="#">切削锤打类</a></span><span class="linesbg"><a href="#">砂磨类</a></span><span class="linesbg"><a href="#">装配类</a></span><span class="linesbg"><a href="#">农林牧矿类</a></span><span class="linesbg"><a href="#">其它类电动工具</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">钳工管工工具</a></strong>
              <p><span class="linesbg"><a href="#">板牙</a></span><span class="linesbg"><a href="#">虎钳类</a></span><span class="linesbg"><a href="#">锉刀类</a></span><span class="linesbg"><a href="#">划线类</a></span><span class="linesbg"><a href="#">丝锥</a></span><span class="linesbg"><a href="#">冲子类</a></span><span class="linesbg"><a href="#">管工工具</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">切削刀具</a></strong>
              <p><span class="linesbg"><a href="#">刀片</a></span><span class="linesbg"><a href="#">钻头</a></span><span class="linesbg"><a href="#">车刀</a></span><span class="linesbg"><a href="#">铣刀</a></span><span class="linesbg"><a href="#">板牙</a></span><span class="linesbg"><a href="#">切刀</a></span><span class="linesbg"><a href="#">锯条锯片</a></span><span class="linesbg"><a href="#">刀具配件</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">农林渔业园艺工具</a></strong>
              <p><span class="linesbg"><a href="#"></a></span><span class="linesbg"><a href="#"></a></span><span class="linesbg"><a href="#">锄头</a></span><span class="linesbg"><a href="#">镰刀</a></span><span class="linesbg"><a href="#">套装园艺工具</a></span><span class="linesbg"><a href="#">园艺剪</a></span><span class="linesbg"><a href="#">渔业用具</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电工工具</a><a href="#">布线工具</a></strong>
              <p><span class="linesbg"><a href="#">电工专用钳类</a></span><span class="linesbg"><a href="#">电工工具套装、工具箱</a></span><span class="linesbg"><a href="#">电工锤</a></span><span class="linesbg"><a href="#">电工刀</a></span><span class="linesbg"><a href="#">布线工具</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">汽保</a><a href="#">润滑工具</a></strong>
              <p><span class="linesbg"><a href="#">汽保工具套装</a></span><span class="linesbg"><a href="#">汽保扳手</a></span><span class="linesbg"><a href="#">汽保套筒</a></span><span class="linesbg"><a href="#">汽保钳类</a></span><span><a href="#">润滑工具</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">工具耗材</a></span><span class="linesbg"><a href="#">磨具磨料</a></span><span class="linesbg"><a href="#">土木及金刚石工具</a></span><span class="linesbg"><a href="#">气动和液压工具</a></span><span class="linesbg"><a href="#">夹具治具</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部工具</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">MRO消耗易耗品</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis15">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">燃料</a></strong>
              <p><span class="linesbg"><a href="#">固体燃料</a></span><span class="linesbg"><a href="#">石油燃料</a></span><span class="linesbg"><a href="#">气体燃料</a></span><span class="linesbg"><a href="#">煤炭</a></span><span class="linesbg"><a href="#">液体燃料</a></span><span class="linesbg"><a href="#">焦炭及副产品</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">焊接耗材</a></strong>
              <p><span class="linesbg"><a href="#">焊条</a></span><span class="linesbg"><a href="#">焊锡丝</a></span><span class="linesbg"><a href="#">焊剂</a></span><span class="linesbg"><a href="#">钎料</a></span><span class="linesbg"><a href="#">焊膏</a></span><span class="linesbg"><a href="#">焊片</a></span><span class="linesbg"><a href="#">助焊剂</a></span><span class="linesbg"><a href="#">其他焊接耗材</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">工具耗材</a></strong>
              <p><span class="linesbg"><a href="#">砂纸</a></span><span class="linesbg"><a href="#">砂轮</a></span><span class="linesbg"><a href="#">钻头</a></span><span class="linesbg"><a href="#">切割片</a></span><span class="linesbg"><a href="#">磨料</a></span><span class="linesbg"><a href="#">锯条锯片</a></span><span class="linesbg"><a href="#">叶轮叶片</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">化学试剂</a><a href="#">消耗品</a></strong>
              <p><span class="linesbg"><a href="#">胶粘剂</a></span><span class="linesbg"><a href="#">洗涤剂</a></span><span class="linesbg"><a href="#">润滑油/工业用油</a></span><span class="linesbg"><a href="#">化学试剂</a></span><span><a href="#">分析试剂</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">胶带</a></strong>
              <p><span class="linesbg"><a href="#">电工绝缘胶带</a></span><span class="linesbg"><a href="#">文具胶带</a></span><span class="linesbg"><a href="#">包装胶带</a></span><span class="linesbg"><a href="#">双面胶带</a></span><span class="linesbg"><a href="#">警示带/标识带</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">劳保用品</a></strong>
              <p><span class="linesbg"><a href="#">安全帽</a></span><span class="linesbg"><a href="#">防护手套</a></span><span class="linesbg"><a href="#">防护鞋</a></span><span class="linesbg"><a href="#">防护服</a></span><span class="linesbg"><a href="#">防护口罩</a></span><span class="linesbg"><a href="#">安全网</a></span><span class="linesbg"><a href="#">安全绳</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">工业皮带</a></strong>
              <p><span class="linesbg"><a href="#">传动带</a></span><span class="linesbg"><a href="#">输送带</a></span><span class="linesbg"><a href="#">网带</a></span><span class="linesbg"><a href="#">物流板箱</a></span><span class="linesbg"><a href="#">物料盒</a></span><span class="linesbg"><a href="#">周转箱</a></span><span class="linesbg"><a href="#">托盘</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">模具</a></span><span class="linesbg"><a href="#">润滑工具</a></span><span class="linesbg"><a href="#">防静电、无尘产品</a></span><span class="linesbg"><a href="#">医用耗材</a></span><span class="linesbg"><a href="#">过滤件</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部MRO消耗易耗品</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">文教办公用品</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis16">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">办公耗材</a></strong>
              <p><span class="linesbg"><a href="#">硒鼓、粉盒</a></span><span class="linesbg"><a href="#">碳粉</a></span><span class="linesbg"><a href="#">墨盒</a></span><span class="linesbg"><a href="#">墨水</a></span><span class="linesbg"><a href="#">鼓芯</a></span><span class="linesbg"><a href="#">考勤卡</a></span><span class="linesbg"><a href="#">过塑膜</a></span><span class="linesbg"><a href="#">装订夹条</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">办公家具</a></strong>
              <p><span class="linesbg"><a href="#">办公桌/电脑桌</a></span><span class="linesbg"><a href="#">办公椅/电脑椅</a></span><span class="linesbg"><a href="#">保险柜</a></span><span class="linesbg"><a href="#">办公沙发</a></span><span class="linesbg"><a href="#">文件柜/档案柜/办公柜</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">文具</a></strong>
              <p><span class="linesbg"><a href="#">书包</a></span><span class="linesbg"><a href="#">文具盒</a></span><span class="linesbg"><a href="#">书套/书皮</a></span><span class="linesbg"><a href="#">书立</a></span><span class="linesbg"><a href="#">书签</a></span><span class="linesbg"><a href="#">直尺</a></span><span class="linesbg"><a href="#">三角尺</a></span><span class="linesbg"><a href="#">圆规</a></span><span class="linesbg"><a href="#">绘图模版</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">簿、本、册</a></strong>
              <p><span class="linesbg"><a href="#">记事本</a></span><span class="linesbg"><a href="#">活页本</a></span><span class="linesbg"><a href="#">线圈本</a></span><span class="linesbg"><a href="#">内页</a></span><span class="linesbg"><a href="#">练习本</a></span><span class="linesbg"><a href="#">电话本/通讯录</a></span><span class="linesbg"><a href="#">信纸/稿纸</a></span><span class="linesbg"><a href="#">信封</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">财会用品</a></strong>
              <p><span class="linesbg"><a href="#">印章</a></span><span class="linesbg"><a href="#">印章垫</a></span><span class="linesbg"><a href="#">印泥/印台</a></span><span class="linesbg"><a href="#">票据/支票</a></span><span class="linesbg"><a href="#">票据夹/支票夹</a></span><span class="linesbg"><a href="#">海绵缸</a></span><span class="linesbg"><a href="#">计算器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">案头用品</a></strong>
              <p><span class="linesbg"><a href="#">胶棒/固体胶</a></span><span class="linesbg"><a href="#">文具胶带</a></span><span class="linesbg"><a href="#">便签盒</a></span><span class="linesbg"><a href="#">针、钉</a></span><span class="linesbg"><a href="#">夹子</a></span><span class="linesbg"><a href="#">剪子</a></span><span class="linesbg"><a href="#">订书机/器</a></span><span class="linesbg"><a href="#">台历</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">玻璃仪器</a></strong>
              <p><span class="linesbg"><a href="#">烧杯烧瓶</a></span><span class="linesbg"><a href="#">器皿</a></span><span class="linesbg"><a href="#">瓶/斗</a></span><span class="linesbg"><a href="#">量器</a></span><span class="linesbg"><a href="#">成套仪器</a></span><span class="linesbg"><a href="#">砂芯滤器</a></span><span class="linesbg"><a href="#">标准磨口仪器</a></span><span class="linesbg"><a href="#">温度计</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">请柬</a></span><span class="linesbg"><a href="#">签名册</a></span><span class="linesbg"><a href="#">地球仪</a></span><span class="linesbg"><a href="#">钥匙架及钥匙箱</a></span><span class="linesbg"><a href="#">磁石及磁条</a></span><span class="linesbg"><a href="#">写字板</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部文教办公用品</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">汽摩用品/配件</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis17">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">汽摩用品</a></strong>
              <p><span class="linesbg"><a href="#">防护保养品</a></span><span class="linesbg"><a href="#">汽车安全用品</a></span><span class="linesbg"><a href="#">车灯</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">摩托车配件</a></strong>
              <p><span class="linesbg"><a href="#">摩托车发动机及配件</a></span><span class="linesbg"><a href="#">摩托车轮胎</a></span><span class="linesbg"><a href="#">摩托车操纵系统配件</a></span><span class="linesbg"><a href="#">摩托车仪表</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">车身及附件</a></strong>
              <p><span class="linesbg"><a href="#">车篷及侧围</a></span><span class="linesbg"><a href="#">车门</a></span><span class="linesbg"><a href="#">汽车座椅及附件</a></span><span class="linesbg"><a href="#">车灯</a></span><span class="linesbg"><a href="#">汽车轴承</a></span><span class="linesbg"><a href="#">翼子板/叶子板</a></span><span class="linesbg"><a href="#">保险杠</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">汽保工具</a></strong>
              <p><span class="linesbg"><a href="#">汽保扳手</a></span><span class="linesbg"><a href="#">汽保套筒</a></span><span class="linesbg"><a href="#">汽保钳类</a></span><span class="linesbg"><a href="#">热风枪</a></span><span class="linesbg"><a href="#">检漏仪</a></span><span class="linesbg"><a href="#">汽保工具套装</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">发动系统</a></strong>
              <p><span class="linesbg"><a href="#">汽车发动机总成</a></span><span class="linesbg"><a href="#">机油泵</a></span><span class="linesbg"><a href="#">气缸及部件</a></span><span class="linesbg"><a href="#">凸轮轴</a></span><span class="linesbg"><a href="#">飞轮、齿圈</a></span><span class="linesbg"><a href="#">气门及部件</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">传动系统</a></strong>
              <p><span class="linesbg"><a href="#">汽车离合器</a></span><span class="linesbg"><a href="#">汽车变速器</a></span><span class="linesbg"><a href="#">分动器</a></span><span class="linesbg"><a href="#">传动轴</a></span><span class="linesbg"><a href="#">取力器</a></span><span class="linesbg"><a href="#">差速器总成</a></span><span class="linesbg"><a href="#">减速器总成</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><span class="linesbg">其它系统</span></strong>
              <p><span class="linesbg"><a href="#">增压器</a></span><span class="linesbg"><a href="#">化油器</a></span><span class="linesbg"><a href="#">输油泵</a></span><span class="linesbg"><a href="#">汽车散热器</a></span><span class="linesbg"><a href="#">汽车消声器</a></span><span class="linesbg"><a href="#">转向机总成</a></span><span><a href="#">刹车蹄、刹车片</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><span class="linesbg">其它配件</span></strong>
              <p><span class="linesbg"><a href="#">空气调节系统</a></span><span class="linesbg"><a href="#">车用仪表</a></span><span class="linesbg"><a href="#">电气设备</a></span><span class="linesbg"><a href="#">车灯</a></span><span class="linesbg"><a href="#">汽车轮胎</a></span><span class="linesbg"><a href="#">摩托车轮胎</a></span><span class="linesbg"><a href="#">电子装置</a></span><span class="linesbg"><a href="#">雨刮器</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部汽摩用品/配件</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><span>生活消费</span></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis18">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">服装鞋帽箱包、钟表眼镜</a></strong>
              <p><span class="linesbg"><a href="#">男装</a></span><span class="linesbg"><a href="#">女装</a></span><span class="linesbg"><a href="#">童装</a></span><span class="linesbg"><a href="#">运动服、户外服</a></span><span class="linesbg"><a href="#">内衣</a></span><span class="linesbg"><a href="#">服饰</a></span><span class="linesbg"><a href="#">箱包</a></span><span class="linesbg"><a href="#">钟表</a></span><span class="linesbg"><a href="#">眼镜</a></span><span class="linesbg"><a href="#"></a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">食品、饮料</a></strong>
              <p><span class="linesbg"><a href="#">米面淀粉</a></span><span class="linesbg"><a href="#">方便与速冻食品</a></span><span class="linesbg"><a href="#">调味品</a></span><span class="linesbg"><a href="#">罐头</a></span><span class="linesbg"><a href="#">食用油</a></span><span class="linesbg"><a href="#">饮料</a></span><span class="linesbg"><a href="#">茶叶</a></span><span class="linesbg"><a href="#"></a></span><span class="linesbg"><a href="#">乳品</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">家电、手机、数码</a></strong>
              <p><span class="linesbg"><a href="#">影音电器</a></span><span class="linesbg"><a href="#">生活电器</a></span><span class="linesbg"><a href="#">厨房电器</a></span><span class="linesbg"><a href="#">手机通讯</a></span><span class="linesbg"><a href="#">大家电</a></span><span class="linesbg"><a href="#">摄影器材</a></span><span class="linesbg"><a href="#">数码产品</a></span><span class="linesbg"><a href="#">电脑</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">家居用品、母婴、玩具</a></strong>
              <p><span class="linesbg"><a href="#">家具</a></span><span class="linesbg"><a href="#">床上用品</a></span><span class="linesbg"><a href="#">日化用品</a></span><span class="linesbg"><a href="#">餐具</a></span><span class="linesbg"><a href="#">厨具</a></span><span class="linesbg"><a href="#">家务清洁</a></span><span class="linesbg"><a href="#">生活用纸</a></span><span class="linesbg"><a href="#">母婴</a></span><span class="linesbg"><a href="#">玩具</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">文娱休闲、运动户外</a></strong>
              <p><span class="linesbg"><a href="#">棋牌</a></span><span class="linesbg"><a href="#">健身器材</a></span><span class="linesbg"><a href="#">垂钓渔具</a></span><span class="linesbg"><a href="#"></a></span><span class="linesbg"><a href="#">极限运动</a></span><span class="linesbg"><a href="#">野餐烧烤</a></span><span class="linesbg"><a href="#">户外用品</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">饰品、工艺品、礼品</a></strong>
              <p><span class="linesbg"><a href="#">首饰</a></span><span class="linesbg"><a href="#">服装饰品</a></span><span class="linesbg"><a href="#">礼品</a></span><span class="linesbg"><a href="#">节庆婚庆用品</a></span><span class="linesbg"><a href="#">殡葬祭祀用品</a></span><span class="linesbg"><a href="#">美术工艺品</a></span><span class="linesbg"><a href="#">宗教用品</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">健康、个人护理、美容</a></strong>
              <p><span class="linesbg"><a href="#">中西药品</a></span><span class="linesbg"><a href="#">保健品</a></span><span class="linesbg"><a href="#">医疗器具</a></span><span class="linesbg"><a href="#">面部护理</a></span><span class="linesbg"><a href="#">彩妆</a></span><span class="linesbg"><a href="#">美发造型</a></span><span class="linesbg"><a href="#">男士香水</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">酒店</a></strong>
              <p><span class="linesbg"><a href="#">品牌酒店</a></span><span class="linesbg"><a href="#">机场酒店</a></span><span class="linesbg"><a href="#">景点酒店</a></span><span class="linesbg"><a href="#">学校酒店</a></span><span class="linesbg"><a href="#">地铁酒店</a></span><span class="linesbg"><a href="#">车站周边酒店</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
        </div>
      </dd>
    </dl>
    <dl class="sidebar_item">
      <dt><i class="sidebar_item_icon03"></i><span>商务服务</span></dt>
      <dd>
        <h3><a href="#">定制加工</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis19">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">金属加工</a></strong>
              <p><span class="linesbg"><a href="#">压力加工</a></span><span class="linesbg"><a href="#">切削加工</a></span><span class="linesbg"><a href="#">钣金加工</a></span><span class="linesbg"><a href="#">电镀加工</a></span><span class="linesbg"><a href="#">线切割加工</a></span><span class="linesbg"><a href="#">铸造</a></span><span class="linesbg"><a href="#">热处理</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong></strong>
              <p><span class="linesbg"><a href="#">管类加工</a></span><span class="linesbg"><a href="#">轴类加工</a></span><span class="linesbg"><a href="#">壳体加工</a></span><span class="linesbg"><a href="#">齿轮加工</a></span><span class="linesbg"><a href="#">轴承加工</a></span><span class="linesbg"><a href="#">孔加工</a></span><span class="linesbg"><a href="#">非标零件加工</a></span><span class="more"></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">服装服饰加工</a></strong>
              <p><span class="linesbg"><a href="#">服装加工</a></span><span class="linesbg"><a href="#">饰品加工</a></span><span class="linesbg"><a href="#">体育运动产品加工</a></span><span class="linesbg"><a href="#">服饰加工</a></span><span class="linesbg"><a href="#">鞋材、鞋件加工</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">塑料加工</a></strong>
              <p><span class="linesbg"><a href="#">注塑加工</a></span><span class="linesbg"><a href="#">挤塑加工</a></span><span class="linesbg"><a href="#">吹塑加工</a></span><span class="linesbg"><a href="#">吸塑加工</a></span><span class="linesbg"><a href="#">压塑加工</a></span><span class="linesbg"><a href="#">铸塑加工</a></span><span class="linesbg"><a href="#">塑料表面处理</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">电子加工</a></strong>
              <p><span class="linesbg"><a href="#">贴片加工</a></span><span class="linesbg"><a href="#">插件加工</a></span><span class="linesbg"><a href="#">邦定加工</a></span><span class="linesbg"><a href="#">焊接加工</a></span><span class="linesbg"><a href="#">电子组装加工</a></span><span class="linesbg"><a href="#">其他电子加工</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">家电数码加工</a></strong>
              <p><span class="linesbg"><a href="#">电脑产品加工</a></span><span class="linesbg"><a href="#">家用电器加工</a></span><span class="linesbg"><a href="#">照明加工</a></span><span class="linesbg"><a href="#">通讯产品加工</a></span><span class="linesbg"><a href="#">音像制品加工</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">文教用品加工</a></strong>
              <p><span class="linesbg"><a href="#">玩具设计加工</a></span><span class="linesbg"><a href="#">办公文教用品加工</a></span><span class="linesbg"><a href="#">纸加工</a></span><span class="linesbg"><a href="#">纸品加工</a></span><span class="linesbg"><a href="#">娱乐休闲产品加工</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">汽摩配件加工</a></span><span class="linesbg"><a href="#">仪器仪表加工</a></span><span class="linesbg"><a href="#">建材加工</a></span><span class="linesbg"><a href="#">家居用品加工</a></span><span class="linesbg"><a href="#">工艺礼品加工</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部定制加工</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">商务与消费服务</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis20">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">建筑业</a></strong>
              <p><span class="linesbg"><a href="#">土木工程建筑</a></span><span class="linesbg"><a href="#">建筑安装</a></span><span class="linesbg"><a href="#">建筑装饰</a></span><span class="linesbg"><a href="#">勘察设计</a></span><span class="linesbg"><a href="#">施工监理</a></span><span class="linesbg"><a href="#">工程承包</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">仓储物流业</a></strong>
              <p><span class="linesbg"><a href="#">铁路运输</a></span><span class="linesbg"><a href="#">公路运输</a></span><span class="linesbg"><a href="#">国内水运</a></span><span class="linesbg"><a href="#">国内空运</a></span><span class="linesbg"><a href="#">国际海运</a></span><span class="linesbg"><a href="#">国际空运</a></span><span class="linesbg"><a href="#">邮政快递业</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">房地产业</a></strong>
              <p><span class="linesbg"><a href="#">物业管理</a></span><span class="linesbg"><a href="#">地产中介</a></span><span class="linesbg"><a href="#">建筑清洁</a></span><span class="linesbg"><a href="#">专业保洁</a></span><span class="linesbg"><a href="#">房产咨询</a></span><span class="linesbg"><a href="#">不动产</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">教育培训</a></strong>
              <p><span class="linesbg"><a href="#">职业培训</a></span><span class="linesbg"><a href="#">拓展培训</a></span><span class="linesbg"><a href="#">管理培训</a></span><span class="linesbg"><a href="#">语言培训</a></span><span class="linesbg"><a href="#">资格考试培训</a></span><span class="linesbg"><a href="#">电脑IT培训</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">商务服务</a></strong>
              <p><span class="linesbg"><a href="#">法律服务</a></span><span class="linesbg"><a href="#">翻译服务</a></span><span class="linesbg"><a href="#">认证服务</a></span><span class="linesbg"><a href="#">财务会计</a></span><span class="linesbg"><a href="#">公关策划</a></span><span class="linesbg"><a href="#">知识产权</a></span><span class="linesbg"><a href="#">产权转让</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">创意设计服务</a></strong>
              <p><span class="linesbg"><a href="#">服装设计</a></span><span class="linesbg"><a href="#">平面审计</a></span><span class="linesbg"><a href="#">包装设计</a></span><span class="linesbg"><a href="#">工业设计服务</a></span><span class="linesbg"><a href="#">装潢设计</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">文化传媒娱乐业</a></strong>
              <p><span class="linesbg"><a href="#">演出票务</a></span><span class="linesbg"><a href="#">经纪服务</a></span><span class="linesbg"><a href="#">体育组织</a></span><span class="linesbg"><a href="#">演出服务</a></span><span class="linesbg"><a href="#">影视节目制作</a></span><span class="linesbg"><a href="#">拍卖服务</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">其它</a></strong>
              <p><span class="linesbg"><a href="#">管理咨询</a></span><span class="linesbg"><a href="#">住宿服务</a></span><span class="linesbg"><a href="#">贸易咨询</a></span><span class="linesbg"><a href="#">投资咨询</a></span><span class="linesbg"><a href="#">专业技术服务</a></span><span class="linesbg"><a href="#">搬家服务</a></span><span class="linesbg"><a href="#">心理咨询</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部商务与消费服务</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">库存与二手</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis21">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item nobg"> <strong><a href="#">库存产品</a></strong>
              <p><span class="linesbg"><a href="#">库存电脑产品</a></span><span class="linesbg"><a href="#">库存玩具</a></span><span class="linesbg"><a href="#">库存家居用品</a></span><span class="linesbg"><a href="#">库存家用电器</a></span><span class="linesbg"><a href="#">库存电工电气产品</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">二手设备</a></strong>
              <p><span class="linesbg"><a href="#">二手机床</a></span><span class="linesbg"><a href="#">二手电子加工设备</a></span><span class="linesbg"><a href="#">二手电脑</a></span><span class="linesbg"><a href="#">二手建材加工设备</a></span><span class="linesbg"><a href="#">二手家用电器</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部库存与二手</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">代理加盟与项目合作</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis22">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">代理加盟</a></strong>
              <p><span class="linesbg"><a href="#">医药代理</a></span><span class="linesbg"><a href="#">医疗器械代理</a></span><span class="linesbg"><a href="#">保健品代理</a></span><span class="linesbg"><a href="#">服装代理</a></span><span class="linesbg"><a href="#">农产品代理</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">项目合作</a></strong>
              <p><span class="linesbg"><a href="#">电子项目</a></span><span class="linesbg"><a href="#">医药项目</a></span><span class="linesbg"><a href="#">保健项目</a></span><span class="linesbg"><a href="#">印刷项目</a></span><span class="linesbg"><a href="#">玩具项目</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">特许经营</a></strong>
              <p><span class="linesbg"><a href="#">中介服务</a></span><span class="linesbg"><a href="#">教育培训</a></span><span class="linesbg"><a href="#">美容健身</a></span><span class="linesbg"><a href="#">餐饮娱乐</a></span><span class="linesbg"><a href="#">零售百货超市</a></span><span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部代理加盟与项目合作</span></a></div>
        </div>
      </dd>
    </dl>
    <dl class="sidebar_item">
      <dt><i class="sidebar_item_icon04"></i><span>金融服务</span></dt>
      <dd>
        <h3><a href="#">贷款服务</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis19">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">贷款类型</a></strong>
              <p><span class="linesbg"><a href="#">企业经营贷款</a></span> <span class="linesbg"><a href="#">企业信用贷款</a></span> <span class="linesbg"><a href="#">个人信用贷款</a></span> <span class="linesbg"><a href="#">抵押经营贷款</a></span> <span class="linesbg"><a href="#">汽车抵押贷款</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">热门贷款</a></strong>
              <p><span class="linesbg"><a href="#">10万企业贷款</a></span> <span class="linesbg"><a href="#">20万企业贷款</a></span> <span class="linesbg"><a href="#">30万企业贷款</a></span> <span class="linesbg"><a href="#">40万企业贷款</a></span> <span class="linesbg"><a href="#">50万企业贷款</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">区域贷款</a></strong>
              <p><span class="linesbg"><a href="#">温州企业贷款</a></span> <span class="linesbg"><a href="#">武汉企业贷款</a></span> <span class="linesbg"><a href="#">合肥企业贷款</a></span> <span class="linesbg"><a href="#">深圳企业贷款</a></span> <span class="linesbg"><a href="#">广州企业贷款</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">过桥贷款</a></strong>
              <p><span class="linesbg"><a href="#">乾元系列</a></span> <span class="linesbg"><a href="#">鼎鑫系列</a></span> <span class="linesbg"><a href="#">范德系列</a></span> <span class="linesbg"><a href="#">智村系列</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">信用卡</a></strong>
              <p><span class="linesbg"><a href="#">招商白金卡</a></span> <span class="linesbg"><a href="#">中信白金卡</a></span> <span class="linesbg"><a href="#">招商GQ卡</a></span> <span class="linesbg"><a href="#">中信QQ卡</a></span> <span class="linesbg"><a href="#">中信淘宝卡</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">票据贴现</a></strong>
              <p><span class="linesbg"><a href="#">上海票据</a></span> <span class="linesbg"><a href="#">北京票据</a></span> <span class="linesbg"><a href="#">南京票据</a></span> <span class="linesbg"><a href="#">江苏票据</a></span> <span class="linesbg"><a href="#">济南票据</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部金融服务</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">理财服务</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis21">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">理财品种</a></strong>
              <p><span class="linesbg"><a href="#">固定收益</a></span> <span class="linesbg"><a href="#">浮动收益</a></span> <span class="linesbg"><a href="#">货币基金</a></span> <span class="linesbg"><a href="#">P2P</a></span> </p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">理财产品</a></strong>
              <p><span class="linesbg"><a href="#">现金宝</a></span> <span class="linesbg"><a href="#">工银货币</a></span> <span class="linesbg"><a href="#">优选理财计划</a></span> <span class="linesbg"><a href="#">月息通</a></span> <span class="linesbg"><a href="#">月月享</a></span> <span class="linesbg"><a href="#">年年利</a></span> </p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部理财服务</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">酒店服务</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis21">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item"> <strong><a href="#">酒店类型</a></strong>
              <p><span class="linesbg"><a href="#">品牌酒店</a></span> <span class="linesbg"><a href="#">机场酒店</a></span> <span class="linesbg"><a href="#">景点酒店</a></span> <span class="linesbg"><a href="#">学校酒店</a></span> <span class="linesbg"><a href="#">地铁酒店</a></span> <span class="linesbg"><a href="#">更多&gt;&gt;</a></span> </p>
            </div>
            <div class="sidebar_popup_item"> <strong><a href="#">热门酒店</a></strong>
              <p><span class="linesbg"><a href="#">北京酒店</a></span> <span class="linesbg"><a href="#">上海酒店</a></span> <span class="linesbg"><a href="#">广州酒店</a></span> <span class="linesbg"><a href="#">成都酒店</a></span> <span class="linesbg"><a href="#">厦门酒店</a></span> <span class="linesbg"><a href="#">更多&gt;&gt;</a></span> </p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">-查看全部酒店服务</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">保险服务</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis21">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item nobg"> <strong><a href="#">保险品牌</a></strong>
              <p><span class="linesbg"><a href="#">平安保险</a></span> <span class="linesbg"><a href="#">华泰保险</a></span> <span class="linesbg"><a href="#">天安保险</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">保险产品</a></strong>
              <p><span class="linesbg"><a href="#">平安车险</a></span> <span class="linesbg"><a href="#">天安团体意外险</a></span> <span class="linesbg"><a href="#">高端医疗险</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部保险服务</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">票据服务</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis21">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item nobg"> <strong><a href="#">票据产品</a></strong>
              <p><span class="linesbg"><a href="#">上海票据</a></span> <span class="linesbg"><a href="#">北京票据</a></span> <span class="linesbg"><a href="#">南京票据</a></span> <span class="linesbg"><a href="#">江苏票据</a></span> <span class="linesbg"><a href="#">济南票据</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部票据服务</span></a></div>
        </div>
      </dd>
      <dd>
        <h3><a href="#">信用卡服务</a></h3>
        <s></s> 
        <!-- 弹出层 -->
        <div class="sidebar_popup dis21">
          <div class="sidebar_popup_class clearfix">
            <div class="sidebar_popup_item nobg"> <strong><a href="#">信用卡银行</a></strong>
              <p><span class="linesbg"><a href="#">中信银行</a></span> <span class="linesbg"><a href="#">招商银行</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
            <div class="sidebar_popup_item nobg"> <strong><a href="#">信用卡产品</a></strong>
              <p><span class="linesbg"><a href="#">招商白金卡</a></span> <span class="linesbg"><a href="#">中信白金卡</a></span> <span class="linesbg"><a href="#">招商GQ卡</a></span> <span class="linesbg"><a href="#">中信QQ卡</a></span> <span class="linesbg"><a href="#">中信淘宝卡</a></span> <span class="more"><a href="#">更多</a></span></p>
            </div>
          </div>
          <div class="sidebar_popup_all"><a href="#"><span class="linesbg">查看全部信用卡服务</span></a></div>
        </div>
      </dd>
    </dl>
  </div>
  <div class="sidebar_bottom"></div>
  <div class="sidebar_con"> </div>
  <div class="sidebar_bottom"></div>
</div>
View Code

代码太长了,折叠了一下,有兴趣可以展开来看。

然后是CSS代码:

body { color: #333; background: #fff }
body, button, input, select, textarea { font-size: 12px; font-family: Arial }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p { margin: 0; padding: 0 }
img { border: 0 }
ol, ul { list-style: none }
em, i { font-style: normal }
.clearfix:after { content: "\200B"; display: block; height: 0; clear: both }
.clearfix { *zoom:1
}
.clear { clear: both; visibility: hidden }
a:link, a:visited { color: #039; text-decoration: none }
a:hover { color: #db4f33; text-decoration: underline }
a.link_red:link, a.link_red:visited { color: #db4f33 }
a.link_red:hover { color: #db4f33 }
a.link_blue:link, a.link_blue:visited { color: #039 }
a.link_blue:hover { color: #cc2829 }
a.link_black:link, a.link_black:visited { color: #333 }
a.link_black:hover { color: #cc2829 }
a.link_grey:link, a.link_grey:visited { color: #999 }
a.link_grey:hover { color: #cc2829 }
a, area { blr:expression(this.onFocus=this.blur())
}
.sidebar_top, .sidebar_bottom, .sidebar_item_icon01, .sidebar_item_icon02, .sidebar_item_icon03, .sidebar_item_icon04, .sidebar_item dd s { background: none }
.sidebar { background: #fff; border: 1px solid #cacaca; border-top: 3px solid #cacaca; width: 204px; position: absolute; left: 0; z-index: 9 }
.sidebar_top { position: relative; padding: 0 20px; height: 40px; line-height: 40px; font-weight: bold; font-size: 16px; font-family: "寰蒋闆呴粦"; color: #000; background: #ececec; cursor: pointer; border-bottom: none }
.sidebar_top_tc { text-align: left }
.sidebar_con { width: 204px; padding: 0; background: none }
.sidebar_item { padding-bottom: 5px; border-top: 1px solid #ccc }
.sidebar_item dt { height: 34px; background: url(images/f_sypic_19.jpg) repeat-x; margin-bottom: 11px }
.sidebar_item dt i { display: inline-block; float: left; width: 17px; height: 17px; margin: 8px 4px 0 23px }
.sidebar_item dt span { float: left; height: 34px; line-height: 34px; font-size: 13px; font-family: "寰蒋闆呴粦"; color: #000; font-weight: bold }
.sidebar_item dd { height: 30px; position: relative }
.sidebar_item dd h3 { position: absolute; z-index: 11; width: 200px; height: 30px; line-height: 30px; font-size: 13px; font-weight: normal; font-family: "寰蒋闆呴粦"; border: none; padding: 0 }
.sidebar_item dd h3 a { display: block; padding: 0 0 0 15px }
.sidebar_item dd h3 a:link { color: #000; text-decoration: none }
.sidebar_item dd h3 a:visited { color: #000; text-decoration: none }
.sidebar_item dd h3 a:hover { color: #000; text-decoration: underline }
.sidebar_item dd s { display: block; width: 4px; height: 8px;background: url(images/f_sypic_icon.png) no-repeat 0 -32px; position: absolute; top: 11px; right: 16px; z-index: 9 }
.sidebar_bottom { height: 10px; position: relative; bottom: 0; z-index: -1 }
.sidebar_focus { background: #FFF }
.sidebar_item dd h3.sidebar_focus a { font-weight: bold; border: 1px solid #cacaca; border-right: none; -moz-border-radius: 5px 5px 5px 5px; -moz-box-shadow: 2px 2px 10px #969696; -webkit-box-shadow: -2px 1px 10px #969696; box-shadow: -2px 1px 10px #969696 }
.sidebar_item dd h3.sidebar_focus a:link { color: #dc4f33; text-decoration: none }
.sidebar_item dd h3.sidebar_focus a:visited { color: #dc4f33; text-decoration: none }
.sidebar_item dd h3.sidebar_focus a:hover { color: #dc4f33; text-decoration: underline }
.sidebar_item dd h3 span { color: #000; padding-left: 15px }
.sidebar_item dd h3.sidebar_focus span { display: block; border: 1px solid #cacaca; color: #dc4f33; font-weight: bold; padding-left: 15px; -moz-border-radius: 5px 5px 5px 5px; -moz-box-shadow: 2px 2px 10px #969696; -webkit-box-shadow: -2px 1px 10px #969696; box-shadow: -2px 1px 10px #969696 }
.sidebar_popup { position: absolute; left: 199px; width: 610px; background: #FFF; border: 1px solid #cacaca; display: none; border-top-right-radius: 2px; border-bottom-right-radius: 2px; z-index: 10; -moz-border-radius: 5px 5px 5px 5px; -moz-box-shadow: 2px 2px 10px #969696; -webkit-box-shadow: 2px 2px 10px #969696; box-shadow: 2px 2px 10px #969696 }
.sidebar_popup_class { padding: 0 5px }
.sidebar_popup_item { width: 260px; height: 72px; float: left; padding: 10px 20px; background: url(images/dot.gif) bottom repeat-x }
.sidebar_popup_item.nobg { background: none }
.sidebar_popup_item strong { display: block; height: 24px; line-height: 24px; color: #DB4F33 }
.sidebar_popup_item strong span { color: #DB4F33 }
.sidebar_popup_item p { height: 48px; overflow: hidden }
.sidebar_popup_item p span { height: 24px; padding-right: 7px; margin-right: 7px; line-height: 24px; display: inline-block }
.sidebar_popup_item p span a { padding: 1px }
.sidebar_popup_item p span a:link { color: #000; text-decoration: none }
.sidebar_popup_item p span a:visited { color: #000; text-decoration: none }
.sidebar_popup_item p span a:hover { color: #fff; text-decoration: none; background: #dc4f33 }
.sidebar_popup_item p span.more { padding-right: 9px; background: url(images/arr_blue.png) right 9px no-repeat }
.sidebar_popup_all { width: 610px; height: 48px; line-height: 48px; text-align: center; border-top: 1px #cbdaea solid }
.sidebar_popup_all a span { padding-right: 11px; background: url(images/arr_orange.png) right 5px no-repeat }
.sidebar_popup_all a { display: block; background: #e8f1ff }
.sidebar_popup_all a:hover { background: #d8e7ff }
.sidebar_popup_item strong a:link, .sidebar_popup_all a:link { color: #db4f33; text-decoration: none }
.sidebar_popup_item strong a:visited, .sidebar_popup_all a:visited { color: #db4f33; text-decoration: none }
.sidebar_popup_item strong a:hover, .sidebar_popup_all a:hover { color: #db4f33; text-decoration: underline }
.i_header, .i_headtopcon, .i_container, .i_footer { width: 1000px; margin: 0 auto }
.sidebar_item_icon01, .sidebar_item_icon02, .sidebar_item_icon03, .sidebar_item_icon04 { background: url(images/f_sypic_icon.png) no-repeat }
.sidebar_item_icon01 { background-position: 0 -160px }
.sidebar_item_icon02 { background-position: -40px -160px }
.sidebar_item_icon03 { background-position: -80px -160px }
.sidebar_item_icon04 { background-position: -130px -160px }
View Code

其中,利用border-radius实现了圆角,利用box-shadow实现了边框阴影。

由于没有绚丽的外观,所以CSS代码也并不复杂,都是一些普通的CSS代码。

最主要的代码就是jQuery了,它实现了子菜单的展开与收起,起着控制的作用。

(function(a) {
    a.fn.hoverDelay = function(c, f, g, b) {
        var g = g || 200,
        b = b || 200,
        f = f || c;
        var e = [],
        d = [];
        return this.each(function(h) {
            a(this).mouseenter(function() {
                var i = this;
                clearTimeout(d[h]);
                e[h] = setTimeout(function() {
                    c.apply(i)
                },
                g)
            }).mouseleave(function() {
                var i = this;
                clearTimeout(e[h]);
                d[h] = setTimeout(function() {
                    f.apply(i)
                },
                b)
            })
        })
    }
})(jQuery);
$(function() {
$(".sidebar").hoverDelay(function() {
        $("#sidebar_box").show();
        $(".sidebar_top s").addClass("s_down");
    },
    function() {
        $("#sidebar_box").hide();
        $(".sidebar_top s").removeClass("s_down");
    });
    $(".sidebar_item dd").hoverDelay(function() {
        $(this).find("h3").addClass("sidebar_focus");
        $(this).find(".sidebar_popup").show(0);
    },
    function() {
        $(this).find("h3").removeClass("sidebar_focus");
        $(this).find(".sidebar_popup").hide(0);
    });
});

这里主要用jQuery控制了鼠标滑过菜单项时的延迟处理,这样你滑杆菜单项要停顿一下子菜单才能展开,鼠标移开是也要停顿一下子菜单才能收起,这样避免重复性的菜单展开折叠,影响用户体验。

处理延时功能主要是hoverDelay发放,其实实现也是比较简单的。

最后,把源代码分享一下,下载地址>>

posted @ 2014-05-16 07:55 html5tricks 阅读(...) 评论(...) 编辑 收藏