仿京东快捷导航栏目
html部分：
<div style="display:block;">
<div id="daohang">
<div class="dhleft">
<a href="">全部商品分类</a>
<div class="erjimenu">
<ul>
<li class="li1">
<div class="mulu">
<a href="">图书</a>
<div class="jian">></div>
<div class="bai"></div>
</div>
<div class="hidemenu">
<div class="hideleft">
<dl class="dl1">
<dt><a href=""> 电子书</a></dt>
<dd><a href="">免费</a></dd>
</dl>
<dl class="dl1">
<dt><a href="">数字音乐</a></dt>
<dd><a href="">通俗流行</a></dd>
</dl>
<dl class="dl1">
<dt><a href=""> 音像</a></dt>
<dd><a href="">音乐</a></dd>
</dl>
<dl class="dl1">
<dt><a href=""> 文艺</a></dt>
<dd><a href="">小说</a></dd>
</dl>
<dl class="dl1">
<dt><a href="">人文社科</a></dt>
<dd><a href="">历史</a></dd>
</dl>
<dl class="dllast">
<dt><a href=""> 其他</a></dt>
<dd><a href="">杂志/期刊</a></dd>
</dl>
</div>
</div>
</li>
<li class="li1">
<div class="mulu">
<a href="">图书</a>
<div class="jian">></div>
<div class="bai"></div>
</div>
<div class="hidemenu">
<div class="hideleft">
<dl class="dl1">
<dt><a href=""> 电子书</a></dt>
<dd><a href="">免费</a></dd>
</dl>
<dl class="dl1">
<dt><a href="">数字音乐</a></dt>
<dd><a href="">通俗流行</a></dd>
</dl>
<dl class="dl1">
<dt><a href=""> 音像</a></dt>
<dd><a href="">音乐</a></dd>
</dl>
<dl class="dl1">
<dt><a href=""> 文艺</a></dt>
<dd><a href="">小说</a></dd>
</dl>
<dl class="dl1">
<dt><a href="">人文社科</a></dt>
<dd><a href="">历史</a></dd>
</dl>
<dl class="dllast">
<dt><a href=""> 其他</a></dt>
<dd><a href="">杂志/期刊</a></dd>
</dl>
</div>
</div>
</li>
<li class="li1">
<div class="mulu">
<a href="">图书</a>
<div class="jian">></div>
<div class="bai"></div>
</div>
<div class="hidemenu">
<div class="hideleft">
<dl class="dl1">
<dt><a href=""> 电子书</a></dt>
<dd><a href="">免费</a></dd>
</dl>
<dl class="dl1">
<dt><a href="">数字音乐</a></dt>
<dd><a href="">通俗流行</a></dd>
</dl>
<dl class="dl1">
<dt><a href=""> 音像</a></dt>
<dd><a href="">音乐</a></dd>
</dl>
<dl class="dl1">
<dt><a href=""> 文艺</a></dt>
<dd><a href="">小说</a></dd>
</dl>
<dl class="dl1">
<dt><a href="">人文社科</a></dt>
<dd><a href="">历史</a></dd>
</dl>
<dl class="dllast">
<dt><a href=""> 其他</a></dt>
<dd><a href="">杂志/期刊</a></dd>
</dl>
</div>
</div>
</li>
<li class="li2">
<div class="mulu">
<a href="">家用电器</a>
<div class="jian">></div>
<div class="bai"></div>
</div>
<div class="hidemenu1">
<div class="hideleft">
<dl class="dl2">
<dt><a href=""> 大家电</a></dt>
<dd><a href="">平板电视</a></dd>
<dd><a href="">空调</a></dd>
<dd><a href="">冰箱</a></dd>
<dd><a href="">洗衣机</a></dd>
<dd><a href="">家庭影院</a></dd>
<dd><a href="">DVD</a></dd>
<dd><a href="">迷你音响</a></dd>
<br>
<dd><a href="">烟机/灶具</a></dd>
<dd><a href="">热水器</a></dd>
<dd><a href="">消毒柜/洗碗机</a></dd>
<dd><a href="">酒柜/冷柜</a></dd>
<dd><a href="">家电配件</a></dd>
</dl>
<dl class="dl3">
<dt><a href="">生活电器</a></dt>
<dd><a href="">取暖电器</a></dd>
<dd><a href="">净化器</a></dd>
<dd><a href="">加湿器</a></dd>
<dd><a href="">扫地机器人</a></dd>
<dd><a href="">吸尘器</a></dd>
<dd><a href="">挂烫机/熨斗</a></dd>
<dd><a href="">插座</a></dd>
<dd><a href="">电话机</a></dd>
<dd><a href="">清洁机</a></dd>
<dd><a href="">除湿机</a></dd>
<dd><a href="">干衣机</a></dd>
<dd><a href="">收录/音机</a></dd>
<dd><a href="">电风扇</a></dd>
<dd><a href="">冷风扇</a></dd>
<dd><a href="">其它生活电器</a></dd>
<dd><a href="">生活电器配件</a></dd>
<dd><a href="">净水设备</a></dd>
<dd><a href="">饮水机</a></dd>
</dl>
<dl class="dl3">
<dt><a href="">厨房电器</a></dt>
<dd><a href="">电压力锅</a></dd>
<dd><a href="">电饭煲</a></dd>
<dd><a href="">豆浆机</a></dd>
<dd><a href="">面包机</a></dd>
<dd><a href="">咖啡机</a></dd>
<dd><a href="">微波炉</a></dd>
<dd><a href="">料理/榨汁机</a></dd>
<dd><a href="">电烤箱</a></dd>
<dd><a href="">电磁炉</a></dd>
<dd><a href="">电饼铛/烧烤盘</a></dd>
<dd><a href="">煮蛋器</a></dd>
<dd><a href="">酸奶机</a></dd>
<dd><a href="">电水壶/热水瓶</a></dd>
<dd><a href="">电炖锅</a></dd>
<dd><a href="">多用途锅</a></dd>
<dd><a href="">果蔬解毒机</a></dd>
<dd><a href="">其它厨房电器</a></dd>
</dl>
<dl class="dl3">
<dt><a href="">个护健康</a></dt>
<dd><a href="">剃须刀</a></dd>
<dd><a href="">剃/脱毛器</a></dd>
<dd><a href="">口腔护理</a></dd>
<dd><a href="">电吹风</a></dd>
<dd><a href="">美容器</a></dd>
<dd><a href="">理发器</a></dd>
<dd><a href="">卷/直发器</a></dd>
<dd><a href="">按摩椅</a></dd>
<dd><a href="">按摩器</a></dd>
<dd><a href="">足浴盆</a></dd>
<dd><a href="">血压计</a></dd>
<dd><a href="">健康秤/厨房秤</a></dd>
<dd><a href="">血糖仪</a></dd>
<dd><a href="">体温计</a></dd>
<dd><a href="">计步器/脂肪检测仪</a></dd>
<dd><a href="">其它健康电器</a></dd>
</dl>
<dl class="dllast2">
<dt><a href="">五金家装</a></dt>
<dd><a href="">电动工具</a></dd>
<dd><a href="">手动工具</a></dd>
<dd><a href="">仪器仪表</a></dd>
<dd><a href="">浴霸/排气扇</a></dd>
<dd><a href="">灯具</a></dd>
<dd><a href="">LED灯</a></dd>
<dd><a href="">洁身器</a></dd>
<dd><a href="">水槽</a></dd>
<dd><a href="">龙头</a></dd>
<dd><a href="">淋浴花洒</a></dd>
<dd><a href="">厨卫五金</a></dd>
<dd><a href="">家具五金</a></dd>
<dd><a href="">门铃</a></dd>
<dd><a href="">电气开关</a></dd>
<dd><a href="">插座</a></dd>
<dd><a href="">电工电料</a></dd>
<dd><a href="">监控安防</a></dd>
<dd><a href="">电线/线缆</a></dd>
</dl>
</div>
</div>
</li>
<li class="li3">
<div class="mulu">
<a href="">手机</a>、
<a href="">数码</a>、
<a href="">京东通信</a>
<div class="jian">></div>
<div class="bai"></div>
</div>
<div class="hidemenu2">
<div class="hideleft">
<dl class="dl1">
<dt><a href="">手机通讯</a></dt>
<dd><a href="">手机</a></dd>
<dd><a href="">对讲机</a></dd>
</dl>
<dl class="dl1">
<dt><a href="">京东通信</a></dt>
<dd><a href="">选号中心</a></dd>
<dd><a href="">自助服务</a></dd>
</dl>
<dl class="dl1">
<dt><a href=""> 运营商</a></dt>
<dd><a href="">购机送费</a></dd>
<dd><a href="">0元购机</a></dd>
<dd><a href="">选号入网</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">手机配件</a></dt>
<dd><a href="">电池</a></dd>
<dd><a href="">蓝牙耳机</a></dd>
<dd><a href="">充电器/数据线</a></dd>
<dd><a href="">手机耳机</a></dd>
<dd><a href="">贴膜</a></dd>
<dd><a href="">存储卡</a></dd>
<dd><a href="">保护套</a></dd>
<dd><a href="">车载</a></dd>
<dd><a href="">iPhone配件</a></dd>
<dd><a href="">创意配件</a></dd>
<dd><a href="">便携/无线音箱</a></dd>
<dd><a href="">机饰品</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">摄影摄像</a></dt>
<dd><a href="">数码相机</a></dd>
<dd><a href="">单电/微单相机</a></dd>
<dd><a href="">单反相机</a></dd>
<dd><a href="">拍立得</a></dd>
<dd><a href="">运动相机</a></dd>
<dd><a href="">摄像机</a></dd>
<dd><a href="">镜头</a></dd>
<dd><a href="">户外器材</a></dd>
<dd><a href="">影棚器材</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">数码配件</a></dt>
<dd><a href="">存储卡</a></dd>
<dd><a href="">读卡器</a></dd>
<dd><a href="">滤镜</a></dd>
<dd><a href="">闪光灯/手柄</a></dd>
<dd><a href="">相机包</a></dd>
<dd><a href="">三脚架/云台</a></dd>
<dd><a href="">相机清洁</a></dd>
<dd><a href="">相机贴膜</a></dd>
<dd><a href="">机身附件</a></dd>
<dd><a href="">镜头附件</a></dd>
<dd><a href="">电池/充电器</a></dd>
<dd><a href="">移动电源</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">时尚影音</a></dt>
<dd><a href="">耳机/耳麦</a></dd>
<dd><a href="">音箱/音响</a></dd>
<dd><a href="">麦克风</a></dd>
<dd><a href="">MP3/MP4</a></dd>
<dd><a href="">数码相框</a></dd>
<dd><a href="">专业音频</a></dd>
<dd><a href="">苹果周边</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">智能设备</a></dt>
<dd><a href="">智能手环</a></dd>
<dd><a href="">智能手表</a></dd>
<dd><a href="">智能眼镜</a></dd>
<dd><a href="">运动跟踪器</a></dd>
<dd><a href="">健康监测</a></dd>
<dd><a href="">智能配饰</a></dd>
<dd><a href="">智能家居</a></dd>
<dd><a href="">体感车</a></dd>
<dd><a href="">其他配件</a></dd>
</dl>
<dl class="dllast">
<dt><a href="">电子教育</a></dt>
<dd><a href="">电子词典</a></dd>
<dd><a href="">电纸书</a></dd>
<dd><a href="">录音笔</a></dd>
<dd><a href="">复读机</a></dd>
<dd><a href="">点读机/笔</a></dd>
<dd><a href="">学生平板</a></dd>
<dd><a href="">早教机</a></dd>
</dl>
</div>
</div>
</li>
<li class="li4">
<div class="mulu">
<a href="">电脑</a>、
<a href="">办公</a>
<div class="jian">></div>
<div class="bai"></div>
</div>
<div class="hidemenu3">
<div class="hideleft">
<dl class="dl2">
<dt><a href="">电脑整机</a></dt>
<dd><a href="">笔记本</a></dd>
<dd><a href="">超极本</a></dd>
<dd><a href="">游戏本</a></dd>
<dd><a href="">平板电脑</a></dd>
<dd><a href="">平板电脑配件</a></dd>
<dd><a href="">台式机</a></dd>
<dd><a href="">服务器/工作站</a></dd>
<dd><a href="">笔记本配件</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">电脑配件</a></dt>
<dd><a href="">CPU</a></dd>
<dd><a href="">主板</a></dd>
<dd><a href="">显卡</a></dd>
<dd><a href="">硬盘</a></dd>
<dd><a href="">SSD固态硬盘</a></dd>
<dd><a href="">内存</a></dd>
<dd><a href="">机箱</a></dd>
<dd><a href="">电源</a></dd>
<dd><a href="">显示器</a></dd>
<dd><a href="">刻录机/光驱</a></dd>
<dd><a href="">声卡/扩展卡</a></dd>
<dd><a href="">散热器</a></dd>
<dd><a href="">装机配件</a></dd>
<dd><a href="">组装电脑</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">外设产品</a></dt>
<dd><a href="">鼠标</a></dd>
<dd><a href="">键盘</a></dd>
<dd><a href="">游戏设备</a></dd>
<dd><a href="">U盘</a></dd>
<dd><a href="">移动硬盘</a></dd>
<dd><a href="">鼠标垫</a></dd>
<dd><a href="">摄像头</a></dd>
<dd><a href="">线缆</a></dd>
<dd><a href="">电玩</a></dd>
<dd><a href="">手写板</a></dd>
<dd><a href="">外置盒</a></dd>
<dd><a href="">电脑工具</a></dd>
<dd><a href="">电脑清洁</a></dd>
<dd><a href="">UPS</a></dd>
<dd><a href="">插座</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">网络产品</a></dt>
<dd><a href="">路由器</a></dd>
<dd><a href="">网卡</a></dd>
<dd><a href="">交换机</a></dd>
<dd><a href="">网络存储</a></dd>
<dd><a href="">4G/3G上网</a></dd>
<dd><a href="">网络盒子</a></dd>
<dd><a href="">网络配件</a></dd>
</dl>
<dl class="dl3">
<dt><a href="">办公设备</a></dt>
<dd><a href="">投影机</a></dd>
<dd><a href="">投影配件</a></dd>
<dd><a href="">多功能一体机</a></dd>
<dd><a href="">打印机</a></dd>
<dd><a href="">传真设备</a></dd>
<dd><a href="">验钞/点钞机</a></dd>
<dd><a href="">扫描设备</a></dd>
<dd><a href="">复合机</a></dd>
<dd><a href="">碎纸机</a></dd>
<dd><a href="">考勤机</a></dd>
<dd><a href="">收款/POS机</a></dd>
<dd><a href="">会议音频视频</a></dd>
<dd><a href="">保险柜</a></dd>
<dd><a href="">装订/封装机</a></dd>
<dd><a href="">安防监控</a></dd>
<dd><a href="">办公家具</a></dd>
<dd><a href="">白板</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">文具耗材</a></dt>
<dd><a href="">硒鼓/墨粉</a></dd>
<dd><a href="">墨盒</a></dd>
<dd><a href="">色带</a></dd>
<dd><a href="">纸类</a></dd>
<dd><a href="">办公文具</a></dd>
<dd><a href="">学生文具</a></dd>
<dd><a href="">文件管理</a></dd>
<dd><a href="">本册/便签</a></dd>
<dd><a href="">计算器</a></dd>
<dd><a href="">笔类</a></dd>
<dd><a href="">画具画材</a></dd>
<dd><a href="">财会用品</a></dd>
<dd><a href="">刻录碟片/附件</a></dd>
</dl>
<dl class="dllast">
<dt><a href="">服务产品</a></dt>
<dd><a href="">上门服务</a></dd>
<dd><a href="">远程服务</a></dd>
<dd><a href="">电脑软件</a></dd>
</dl>
</div>
</div>
</li>
<li class="li5">
<div class="mulu">
<a href="">家居</a>、
<a href="">家具</a>、
<a href="">家装</a>、
<a href="">厨具</a>
<div class="jian">></div>
<div class="bai"></div>
</div>
<div class="hidemenu4">
<div class="hideleft">
<dl class="dl1">
<dt><a href=""> 厨具</a></dt>
<dd><a href="">烹饪锅具</a></dd>
<dd><a href="">刀剪菜板</a></dd>
<dd><a href="">厨房配件</a></dd>
<dd><a href="">水具酒具</a></dd>
<dd><a href="">餐具</a></dd>
<dd><a href="">茶具/咖啡具</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">家装建材</a></dt>
<dd><a href="">灯饰照明</a></dd>
<dd><a href="">厨房卫浴</a></dd>
<dd><a href="">五金工具</a></dd>
<dd><a href="">电工电料</a></dd>
<dd><a href="">墙地面材料</a></dd>
<dd><a href="">装饰材料</a></dd>
<dd><a href="">装修服务</a></dd>
<dd><a href="">吸顶灯</a></dd>
<dd><a href="">淋浴花洒</a></dd>
<dd><a href="">开关插座</a></dd>
<dd><a href="">油漆涂料</a></dd>
<dd><a href="">龙头</a></dd>
</dl>
<dl class="dl2">
<dt><a href=""> 家纺</a></dt>
<dd><a href="">床品套件</a></dd>
<dd><a href="">被子</a></dd>
<dd><a href="">蚊帐</a></dd>
<dd><a href="">凉席</a></dd>
<dd><a href="">床单被罩</a></dd>
<dd><a href="">枕芯</a></dd>
<dd><a href="">毛巾浴巾</a></dd>
<dd><a href="">布艺软饰</a></dd>
<dd><a href="">毯子</a></dd>
<dd><a href="">抱枕靠垫</a></dd>
<dd><a href="">床垫/床褥</a></dd>
<dd><a href="">窗帘/窗纱</a></dd>
<dd><a href="">电热毯</a></dd>
</dl>
<dl class="dl3">
<dt><a href=""> 家具</a></dt>
<dd><a href="">卧室家具</a></dd>
<dd><a href="">客厅家具</a></dd>
<dd><a href="">餐厅家具</a></dd>
<dd><a href="">书房家具</a></dd>
<dd><a href="">储物家具</a></dd>
<dd><a href="">阳台/户外</a></dd>
<dd><a href="">商业办公</a></dd>
<dd><a href="">床</a></dd>
<dd><a href="">床垫</a></dd>
<dd><a href="">沙发</a></dd>
<dd><a href="">电脑椅</a></dd>
<dd><a href="">衣柜</a></dd>
<dd><a href="">茶几</a></dd>
<dd><a href="">电视柜</a></dd>
<dd><a href="">餐桌</a></dd>
<dd><a href="">电脑桌</a></dd>
<dd><a href="">鞋架/衣帽架</a></dd>
</dl>
<dl class="dl2">
<dt><a href=""> 灯具</a></dt>
<dd><a href="">台灯</a></dd>
<dd><a href="">吸顶灯</a></dd>
<dd><a href="">筒灯射灯</a></dd>
<dd><a href="">LED灯</a></dd>
<dd><a href="">节能灯</a></dd>
<dd><a href="">落地灯</a></dd>
<dd><a href="">五金电器</a></dd>
<dd><a href="">应急灯/手电</a></dd>
<dd><a href="">装饰灯</a></dd>
<dd><a href="">吊灯</a></dd>
<dd><a href="">氛围照明</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">生活日用</a></dt>
<dd><a href="">收纳用品</a></dd>
<dd><a href="">雨伞雨具</a></dd>
<dd><a href="">浴室用品</a></dd>
<dd><a href="">缝纫/针织用品</a></dd>
<dd><a href="">洗晒/熨烫</a></dd>
<dd><a href="">净化除味</a></dd>
</dl>
<dl class="dl3">
<dt><a href="">家装软饰</a></dt>
<dd><a href="">桌布/罩件</a></dd>
<dd><a href="">地毯地垫</a></dd>
<dd><a href="">沙发垫套/椅垫</a></dd>
<dd><a href="">帘艺隔断</a></dd>
<dd><a href="">相框/照片墙</a></dd>
<dd><a href="">装饰字画</a></dd>
<dd><a href="">墙贴/装饰贴</a></dd>
<dd><a href="">节庆饰品</a></dd>
<dd><a href="">手工/十字绣</a></dd>
<dd><a href="">钟饰</a></dd>
<dd><a href="">装饰摆件</a></dd>
<dd><a href="">花瓶花艺</a></dd>
<dd><a href="">创意家居</a></dd>
<dd><a href="">保暖防护</a></dd>
<dd><a href="">香薰蜡烛</a></dd>
</dl>
<dl class="dl2">
<dt><a href="">清洁用品</a></dt>
<dd><a href="">纸品湿巾</a></dd>
<dd><a href="">衣物清洁</a></dd>
<dd><a href="">清洁工具</a></dd>
<dd><a href="">家庭清洁</a></dd>
<dd><a href="">一次性用品</a></dd>
<dd><a href="">驱虫用品</a></dd>
<dd><a href="">皮具护理</a></dd>
</dl>
<dl class="dllast1">
<dt><a href="">宠物生活</a></dt>
<dd><a href="">宠物主粮</a></dd>
<dd><a href="">宠物零食</a></dd>
<dd><a href="">洗护美容</a></dd>
<dd><a href="">家居日用</a></dd>
<dd><a href="">医疗保健</a></dd>
<dd><a href="">出行装备</a></dd>
<dd><a href="">宠物玩具</a></dd>
<dd><a href="">水族用品</a></dd>
<dd><a href="">猫砂/尿布</a></dd>
<dd><a href="">宠物牵引</a></dd>
<dd><a href="">宠物驱虫</a></dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div class="mainleft">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
<div class="mainright">
</div>
</div>
</div>
css部分：
#daohang {
height: 40px;
margin: 0px 200px;
background: #E43D3F;
position: relative;
z-index: 97;
}
#daohang .dhleft {
width: 210px;
height: 40px;
float: left;
}
#daohang .dhleft .erjimenu {
width: 206px;
height: 401px;
position: relative;
/*border-top: none;
border: 2px solid #E4393C;
*/
background-color: #6E6568;
}
#daohang .dhleft .erjimenu ul {
margin-top: 9px;
margin-left: 1px;
padding: 15px 5px 0px 0px;
}
#daohang .dhleft .erjimenu ul li {
width: 200px;
height: 45px;
float: right;
border-left: none;
list-style-type: none;
}
#daohang .dhleft .erjimenu ul li .mulu {
margin-left: 15px;
position: relative;
margin-top: 10px;
}
#daohang .dhleft .erjimenu ul li .mulu .jian {
width: 10px;
height: 10px;
background: url(../images/all.png) no-repeat -110px -45px;
position: absolute;
top: 7px;
right: 3px;
}
#daohang .dhleft .erjimenu ul li .mulu .bai {
width: 4px;
height: 27px;
position: absolute;
z-index: 24;
top: 0px;
right: 1px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu {
width: 705px;
height: 439px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu1 {
width: 705px;
height: 387px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu2 {
width: 705px;
height: 451px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu3 {
width: 705px;
height: 419px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu4 {
width: 705px;
height: 561px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu5 {
width: 705px;
height: 540px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu6 {
width: 705px;
height: 370px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu7 {
width: 705px;
height: 457px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu8 {
width: 705px;
height: 517px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu9 {
width: 705px;
height: 395px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu10 {
width: 705px;
height: 571px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu11 {
width: 705px;
height: 429px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu12 {
width: 705px;
height: 382px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hidemenu13 {
width: 705px;
height: 448px;
background: white;
border: 1px solid #ccc;
z-index: 23;
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#daohang .dhleft .erjimenu ul li .hideleft {
width: 489px;
height: 439px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft1 {
width: 351px;
height: 391px;
margin-top: 7px;
float: left;
border-right: 1px solid #ccc;
}
#daohang .dhleft .erjimenu ul li .hideleft2 {
border-right: none;
}
#daohang .dhleft .erjimenu ul li .hidetop {
width: 665px;
height: 38px;
border-bottom: 1px solid #ccc;
float: left;
margin-left: 10px;
}
#daohang .dhleft .erjimenu ul li .hidetop ul {
margin-left: 10px;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li {
width: 86px;
height: 28px;
float: left;
margin-right: 20px;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li a {
color: #666;
float: left;
text-decoration: none;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li .chong {
width: 30px;
height: 30px;
float: left;
background: url(../images/zz.png) no-repeat;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li .caipiao {
width: 30px;
height: 30px;
float: left;
background: url(../images/zz.png) no-repeat 0 -49px;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li .peixun {
width: 30px;
height: 30px;
float: left;
background: url(../images/zz.png) no-repeat 0 -100px;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li .jipiao {
width: 30px;
height: 30px;
float: left;
background: url(../images/zz.png) no-repeat 0 -146px;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li .qianzheng {
width: 30px;
height: 30px;
float: left;
background: url(../images/zz.png) no-repeat 0 -194px;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li .youxi {
width: 30px;
height: 30px;
float: left;
background: url(../images/zz.png) no-repeat 0 -243px;
}
#daohang .dhleft .erjimenu ul li .hidetop ul li a:hover {
color: #E4393C;
font-size: 14px;
text-decoration: underline;
font-weight: normal;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl1 {
width: 477px;
height: 25px;
margin-left: 10px;
border-bottom: 1px solid #eee;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dl1 {
width: 334px;
height: 25px;
margin-left: 10px;
border-bottom: 1px solid #eee;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft .dllast {
width: 477px;
height: 25px;
margin-left: 10px;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft .dllast1 {
width: 477px;
height: 47px;
margin-left: 10px;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dllast1 {
width: 334px;
height: 47px;
margin-left: 10px;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dllast1 dt {
}
#daohang .dhleft .erjimenu ul li .hideleft .dllast2 {
width: 477px;
height: 69px;
margin-left: 10px;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl2 {
width: 477px;
height: 47px;
margin-left: 8px;
border-bottom: 1px solid #eee;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dl2 {
width: 334px;
height: 47px;
margin-left: 8px;
border-bottom: 1px solid #eee;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl3 {
width: 477px;
height: 69px;
margin-left: 8px;
border-bottom: 1px solid #eee;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dl3 {
width: 334px;
height: 69px;
margin-left: 8px;
border-bottom: 1px solid #eee;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl4 {
width: 477px;
height: 103px;
margin-left: 10px;
border-bottom: 1px solid #eee;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl5 {
width: 477px;
height: 125px;
margin-left: 10px;
border-bottom: 1px solid #eee;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl2 dt {
width: 52px;
height: 47px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dl2 dt {
width: 52px;
height: 47px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft .dllast1 dt {
width: 52px;
height: 47px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dllast1 dt {
width: 52px;
height: 47px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dllast {
width: 334px;
height: 25px;
margin-left: 10px;
padding: 6px 0px;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dllast dt {
width: 52px;
height: 25px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl3 dt {
width: 52px;
height: 69px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft1 .dl3 dt {
width: 52px;
height: 69px;
float: left;
/*border: 1px solid orange;*/
}
#daohang .dhleft .erjimenu ul li .hideleft1 dt a {
color: #E4393C;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl4 dt {
width: 52px;
height: 103px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft .dl5 dt {
width: 52px;
height: 125px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft .dllast2 dt {
width: 52px;
height: 69px;
float: left;
}
#daohang .dhleft .erjimenu ul li .hideleft dt {
float: left;
margin-right: 10px;
}
#daohang .dhleft .erjimenu ul li .hideleft1 dt {
float: left;
margin-right: 10px;
}
#daohang .dhleft .erjimenu ul li .hideleft dt a {
color: #E4393C;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
#daohang .dhleft .erjimenu ul li .hideleft dd {
float: left;
white-space: nowrap;
}
#daohang .dhleft .erjimenu ul li .hideleft dd a {
font-size: 12px;
font-weight: 400;
padding: 0px 8px;
color: #666;
border-left: 1px solid #ccc;
text-decoration: none;
}
#daohang .dhleft .erjimenu ul li .hideleft1 dd {
float: left;
white-space: nowrap; /*文本不会拆开*/
}
#daohang .dhleft .erjimenu ul li .hideleft1 dd a {
font-size: 12px;
font-weight: 400;
padding: 0px 8px;
color: #666;
border-left: 1px solid #ccc;
text-decoration: none;
}
#daohang .dhleft .erjimenu ul li .hideleft dd a:hover {
color: #E4393C;
text-decoration: underline;
}
#daohang .dhleft .erjimenu ul li .hideleft1 dd a:hover {
color: #E4393C;
text-decoration: underline;
}
#daohang .dhleft .erjimenu ul li.li1:hover .hidemenu,
#daohang .dhleft .erjimenu ul li.li2:hover .hidemenu1,
#daohang .dhleft .erjimenu ul li.li3:hover .hidemenu2,
#daohang .dhleft .erjimenu ul li.li4:hover .hidemenu3,
#daohang .dhleft .erjimenu ul li.li5:hover .hidemenu4,
#daohang .dhleft .erjimenu ul li.li6:hover .hidemenu5,
#daohang .dhleft .erjimenu ul li.li7:hover .hidemenu6,
#daohang .dhleft .erjimenu ul li.li8:hover .hidemenu7,
#daohang .dhleft .erjimenu ul li.li9:hover .hidemenu8,
#daohang .dhleft .erjimenu ul li.li10:hover .hidemenu9,
#daohang .dhleft .erjimenu ul li.li11:hover .hidemenu10,
#daohang .dhleft .erjimenu ul li.li12:hover .hidemenu11,
#daohang .dhleft .erjimenu ul li.li13:hover .hidemenu12,
#daohang .dhleft .erjimenu ul li.li14:hover .hidemenu13,
#daohang .dhleft .erjimenu ul li:hover .bai {
display: block;
}
#daohang .dhleft .erjimenu > ul > li:hover .jian {
display: none;
}
#daohang .dhleft .erjimenu > ul > li:hover {
/* border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;*/
background-color: #999395;
}
#daohang .dhleft .erjimenu ul li a {
font-size: 14px;
line-height: 26px;
color: #fff;
font-weight: 400;
text-decoration: none;
font-family: "微软雅黑";
}
#daohang .dhleft .erjimenu ul li a:hover {
color: #E4393C;
font-weight: 700;
}
#daohang .dhleft > a {
width: 190px;
height: 40px;
display: block;
color: white;
font-weight: 700;
font-size: 14px;
padding-left: 20px;
line-height: 40px;
}
#daohang .dhleft a:hover {
text-decoration: underline;
}
/*轮播区域开始*/
#main {
height: 400px;
margin: 0 auto;
position: relative;
z-index: 96;
margin-top: 9px;
}
#main .mainleft {
width: 450px;
height: 399px;
margin-left: 405px;
float: left;
}
#main .mainright {
width: 310px;
height: 400px;
float: right;
margin-right: 160px;
/*border: 1px solid orange;*/
}
#main .mainleft .lunbo {
width: 450px;
height: 240px;
float: left;
position: relative;
}
#main .mainleft .lunbo .pic li {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
#main .mainleft .lunbo .nav {
position: absolute;
bottom: 10px;
right: 5px;
z-index: 12;
/*border: 1px solid red;*/
}
#main .mainleft .lunbo .nav li {
list-style: none;
float: left;
width: 22px;
height: 22px;
background: #999999;
line-height: 22px;
font-size: 14px;
color: white;
text-align: center;
margin-right: 10px;
border-radius: 10px;
cursor: pointer;
position: relative;
}
#main .mainleft .lunbo .nav li.on {
background: #E4393C;
}
#main .mainleft .liulan {
width: 450px;
height: 159px;
float: left;
border-bottom: 1px solid #eee;
}
#main .mainleft .liulan .liuleft {
width: 30px;
height: 159px;
float: left;
border-left: 1px solid #eee;
cursor: pointer;
}
#main .mainleft .liulan .liuleft .lefttu {
width: 25px;
height: 32px;
background: url(../images/16.png) no-repeat -83px -51px;
margin-top: 65px;
}
#main .mainleft .liulan .liucenter {
width: 450px;
height: 159px;
float: left;
overflow: hidden;
position: relative;
}
#main .mainleft .liulan .liucenter ul {
width: 9999px;
position: relative;
left: 0px;
}
#main .mainleft .liulan .liucenter ul li {
width: 202px;
height: 159px;
float: left;
border-right: 1px solid #EEE;
}
#main .mainleft .liulan .liuright {
width: 30px;
height: 159px;
float: left;
cursor: pointer;
border-right: 1px solid #EEE;
/*display: none;*/
}
#main .mainleft .liulan .liuright .righttu {
width: 25px;
height: 32px;
background: url(../images/16.png) no-repeat -50px -51px;
margin-top: 65px;
}
/*轮播区域结束*/
最终效果图：
参考地址： http://www.jsdaima.com/Upload/1434550943/index.html
浙公网安备 33010602011771号