二、JavaScript语言--JS实践--商城分类导航效果

时间:2022-09-11 23:04:26

商城类导航菜单制作(以京东为例--竖向列表横向伸缩)

可以用两种方式来实现:用CSS实现和用JS实现

方法一:用CSS实现(要点:使用hover)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title>
<style type="text/css">
body {
padding: 0;
font-size: 10pt;
behavior: url(css/csshover.htc);
} .topmenu {
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
} .toptitle {
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
padding-left: 20px;
} .topmenu li {
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background-image: url(1.png);
background-repeat: no-repeat;
background-position: right;
} .topmenu li a {
text-decoration: none;
color: #313131;
} .topmenu li a:hover {
text-decoration: underline;
font-weight: bold;
color: #e4393c;
} .topmenu li:hover {
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
} .submenu {
display: none;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
} .leftdiv {
float: left;
width: 490px;
margin: 5px;
} .rightdiv {
float: left;
width: 200px;
margin: 5px;
} .topmenu li:hover .submenu {
display: block;
} .topmenu li:hover span {
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 30px;
float: right;
position: relative;
} .leftdiv dl {
display: block;
border-bottom: 1px solid #EEE;
padding-bottom: 6px;
overflow: hidden;
} .leftdiv dl dt {
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
} .leftdiv dl dt a {
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
} .leftdiv dl dd {
display: block;
overflow: hidden;
} .leftdiv dl dd a {
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
} .rightdiv dl dd {
margin: 3px 0;
} .rightdiv dl dt {
color: #e4393c;
font-weight: bold;
font-size: 10pt;
} .rightdiv dl dd a {
font-size: 9pt;
color: #737373;
line-height: 22px;
} .rightdiv dl dd a:hover {
color: #737373;
font-weight: normal;
}
</style>
</head> <body>
<ul class="topmenu">
<div class="toptitle">
全部商品分类
</div>
<li><a href="#">图书、音像、数字商品</a><span></span>
<b><a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a></b>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">电子书</a></dt>
<dd>
<a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
<a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
</dd>
</dl>
<dl>
<dt><a href="#">数字音乐</a></dt>
<dd>
<a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
<a href="#">乡村民谣</a> <a href="#">有声读物</a>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
</dd>
</dl>
<dl>
<dt><a href="#">文艺</a></dt>
<dd>
<a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a href="#">艺术</a>
</dd>
</dl>
<dl>
<dt><a href="#">人文社科</a></dt>
<dd>
<a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
<a href="#">哲学/宗教</a> <a href="#">社会科学</a>
</dd>
</dl>
<dl>
<dt><a href="#">经管励志</a></dt>
<dd>
<a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
</dd>
</dl>
<dl class="fore7">
<dt><a href="#">生活</a></dt>
<dd>
<a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
<a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
<a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
</dd>
</dl>
<dl>
<dt><a href="#">科技</a></dt>
<dd>
<a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
</dd>
</dl>
<dl>
<dt><a href="#">少儿</a></dt>
<dd>
<a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
<a href="#">11-14岁</a>
</dd>
</dl>
<dl>
<dt><a href="#">教育</a></dt>
<dd>
<a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
</dd>
</dl>
<dl>
<dt><a href="#">其它</a></dt>
<dd>
<a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
<a href="#">杂志/期刊</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" width="194" height="70" title="\家电">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" width="194" height="70" title="小家电--三请聚宝盆">
</a>
</dd>
</dl>
<dl>
<dt>推荐品牌</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>
</div>
</div>
</li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机、数码</a></li>
<li><a href="#">电脑、办公</a></li>
<li><a href="#">家居、家具、家装、厨具</a></li>
<li><a href="#">服饰内衣、珠宝首饰</a></li>
<li><a href="#">个护化妆</a></li>
<li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">汽车用品</a></li>
<li><a href="#">母婴、玩具乐器</a></li>
<li><a href="#">食品饮料、酒类、生鲜</a></li>
<li><a href="#">营养保健</a></li>
</ul>
</body> </html>

注意:IE6不兼容,可以这样进行处理:

aaarticlea/png;base64,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" alt="" />

方法二:用JS实现(要点:利用鼠标经过和鼠标退出事件,更换class)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title>
<style type="text/css">
<style type="text/css"> body {
padding: 0;
font-size: 10pt;
behavior: url(css/csshover.htc);
} .topmenu {
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
} .toptitle {
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
padding-left: 20px;
} .topmenu li {
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background-image: url(1.png);
background-repeat: no-repeat;
background-position: right;
} .topmenu li a {
text-decoration: none;
color: #313131;
} .topmenu li a:hover {
text-decoration: underline;
font-weight: bold;
color: #e4393c;
} .topmenu .lihover
/*鼠标移动到上面时,应用的样式*/ {
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
height: 60px;
border-left: 4px solid #e4393c;
} .topmenu .lihover .submenu
/*悬浮层*/ {
display: block;
} .topmenu .lihover span
/*白色小方框*/ {
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 60px;
float: right;
position: relative;
} .topmenu .lihover b {
display: block;
height: 30px;
line-height: 30px;
font-weight: normal;
font-size: 10pt;
} .submenu {
display: none;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
} .leftdiv {
float: left;
width: 490px;
margin: 5px;
} .rightdiv {
float: left;
width: 200px;
margin: 5px;
} .leftdiv dl {
display: block;
border-bottom: 1px solid #EEE;
padding-bottom: 6px;
overflow: hidden;
} .leftdiv dl dt {
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
} .leftdiv dl dt a {
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
} .leftdiv dl dd {
display: block;
overflow: hidden;
} .leftdiv dl dd a {
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
} .rightdiv dl dd {
margin: 3px 0;
} .rightdiv dl dt {
color: #e4393c;
font-weight: bold;
font-size: 10pt;
} .rightdiv dl dd a {
font-size: 9pt;
color: #737373;
line-height: 22px;
} .rightdiv dl dd a:hover {
color: #737373;
font-weight: normal;
} .topmenu li b {
display: none;
} .rightPic {
position: relative;
right: -35px;
bottom: -20px;
}
</style>
</head> <body>
<script type="text/javascript">
window.onload = function() {
var Lis = document.getElementsByTagName("li");
for (i = 0; i < Lis.length; i++) {
Lis[i].onmouseover = function() {
this.className = "lihover";
} Lis[i].onmouseout = function() {
this.className = "";
}
} }
</script>
<ul class="topmenu">
<div class="toptitle">
全部商品分类
</div>
<li><a href="#">图书、音像、数字商品</a><span></span> <b><a href="#">文学</a> <a href="#">经管</a>
<a href="#">畅读VIP</a></b>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">电子书</a></dt>
<dd>
<a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
<a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
</dd>
</dl>
<dl>
<dt><a href="#">数字音乐</a></dt>
<dd>
<a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
<a href="#">乡村民谣</a> <a href="#">有声读物</a>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
</dd>
</dl>
<dl>
<dt><a href="#">文艺</a></dt>
<dd>
<a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a href="#">艺术</a>
</dd>
</dl>
<dl>
<dt><a href="#">人文社科</a></dt>
<dd>
<a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
<a href="#">哲学/宗教</a> <a href="#">社会科学</a>
</dd>
</dl>
<dl>
<dt><a href="#">经管励志</a></dt>
<dd>
<a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
</dd>
</dl>
<dl class="fore7">
<dt><a href="#">生活</a></dt>
<dd>
<a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
<a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
<a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
</dd>
</dl>
<dl>
<dt><a href="#">科技</a></dt>
<dd>
<a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
</dd>
</dl>
<dl>
<dt><a href="#">少儿</a></dt>
<dd>
<a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
<a href="#">11-14岁</a>
</dd>
</dl>
<dl>
<dt><a href="#">教育</a></dt>
<dd>
<a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
</dd>
</dl>
<dl>
<dt><a href="#">其它</a></dt>
<dd>
<a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
<a href="#">杂志/期刊</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" width="194" height="70" title="\家电">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" width="194" height="70" title="小家电--三请聚宝盆">
</a>
</dd>
</dl>
<dl>
<dt>推荐品牌</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>
<img class="rightPic" src="wii.png" />
</div>
</div>
</li>
<li><a href="#">家用电器</a> <span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">大 家 电</a></dt>
<dd>
<a href="#">平板电视</a> <a href="#">空调</a> <a href="#">冰箱</a> <a href="#">洗衣机</a> <a href="#">家庭影院</a> <a href="#">DVD</a> <a href="#">迷你音响</a> <a href="#">烟机/灶具</a>
<a href="#">热水器</a> <a href="#">消毒柜/洗碗机</a> <a href="#">酒柜/冷柜</a> <a href="#">家电配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">生活电器</a></dt>
<dd>
<a href="#">电风扇</a> <a href="#">冷风扇</a> <a href="#">净化器</a> <a href="#">饮水机</a>
<a href="#">净水设备</a> <a href="#">挂烫机/熨斗</a> <a href="#">吸尘器</a> <a href="#">电话机</a>
<a href="#">插座</a> <a href="#">收录/音机</a> <a href="#">清洁机</a> <a href="#">加湿器</a>
<a href="#">除湿/干衣机</a> <a href="#">取暖电器</a> <a href="#">其它生活电器</a>
</dd>
</dl>
<dl>
<dt><a href="#">厨房电器</a></dt>
<dd>
<a href="#">电压力锅</a> <a href="#">电饭煲</a> <a href="#">豆浆机</a> <a href="#">面包机</a>
<a href="#">咖啡机</a> <a href="#">微波炉</a> <a href="#">料理/榨汁机</a> <a href="#">电烤箱</a>
<a href="#">电磁炉</a> <a href="#">电饼铛/烧烤盘</a> <a href="#">煮蛋器</a> <a href="#">酸奶机</a>
<a href="#">电水壶/热水瓶</a> <a href="#">电炖锅</a> <a href="#">多用途锅</a> <a href="#">果蔬解毒机</a>
<a href="#">其它厨房电器</a>
</dd>
</dl>
<dl>
<dt><a href="#">个护健康</a></dt>
<dd>
<a href="#">剃须刀</a> <a href="#">剃/脱毛器</a> <a href="#">口腔护理</a> <a href="#">电吹风</a>
<a href="#">美容</a> <a href="#">美发</a> <a href="#">按摩器</a> <a href="#">按摩椅</a> <a href="#">足浴盆</a> <a href="#">血压计</a> <a href="#">健康秤/厨房秤</a> <a href="#">血糖仪</a>
<a href="#">体温计</a> <a href="#">计步器/脂肪检测仪</a> <a href="#">其它健康电器</a>
</dd>
</dl>
<dl>
<dt><a href="#">五金家装</a></dt>
<dd>
<a href="#">电动工具</a> <a href="#">手动工具</a> <a href="#">仪器仪表</a> <a href="#">浴霸/排气扇</a>
<a href="#">灯具</a> <a href="#">LED灯</a> <a href="#">洁身器</a> <a href="#">水槽</a> <a href="#">龙头</a> <a href="#">淋浴花洒</a> <a href="#">厨卫五金</a> <a href="#">家具五金</a>
<a href="#">门铃</a> <a href="#">电气开关</a> <a href="#">插座</a> <a href="#">电工电料</a>
<a href="#">监控安防</a> <a href="#">电线/线缆</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">手机、数码</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">手机通讯</a></dt>
<dd>
<a href="#">手机</a> <a href="#">对讲机</a>
</dd>
</dl>
<dl>
<dt><a href="#">京东通信</a></dt>
<dd>
<a href="#">选号中心</a> <a href="#">自助服务</a>
</dd>
</dl>
<dl>
<dt><a href="#">运营商</a></dt>
<dd>
<a href="#">购机送费</a> <a href="#">0元购机</a> <a href="#">选号入网</a>
</dd>
</dl>
<dl>
<dt><a href="#">手机配件</a></dt>
<dd>
<a href="#">电池</a> <a href="#">蓝牙耳机</a> <a href="#">充电器/数据线</a> <a href="#">手机耳机</a>
<a href="#">贴膜</a> <a href="#">存储卡</a> <a href="#">保护套</a> <a href="#">车载</a> <a href="#">iPhone配件</a> <a href="#">创意配件</a> <a href="#">便携/无线音箱</a> <a href="#">手机饰品</a>
</dd>
</dl>
<dl>
<dt><a href="#">摄影摄像</a></dt>
<dd>
<a href="#">数码相机</a> <a href="#">单电/微单相机</a> <a href="#">单反相机</a> <a href="#">拍立得</a>
<a href="#">运动相机</a> <a href="#">摄像机</a> <a href="#">镜头</a> <a href="#">户外器材</a>
<a href="#">摄影器材</a>
</dd>
</dl>
<dl>
<dt><a href="#">数码配件</a></dt>
<dd>
<a href="#">存储卡</a> <a href="#">读卡器</a> <a href="#">滤镜</a> <a href="#">闪光灯/手柄</a>
<a href="#">相机包</a> <a href="#">三脚架/云台</a> <a href="#">相机清洁</a> <a href="#">相机贴膜</a>
<a href="#">机身附件</a> <a href="#">镜头附件</a> <a href="#">电池/充电器</a> <a href="#">移动电源</a>
</dd>
</dl>
<dl>
<dt><a href="#">时尚影音</a></dt>
<dd>
<a href="#">耳机/耳麦</a> <a href="#">音箱/音响</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a>
<a href="#">数码相框</a> <a href="#">专业音频</a> <a href="#">苹果周边</a>
</dd>
</dl>
<dl>
<dt><a href="#">智能设备</a></dt>
<dd>
<a href="#">智能手环</a> <a href="#">智能手表</a> <a href="#">智能眼镜</a> <a href="#">运动跟踪器</a>
<a href="#">健康监测</a> <a href="#">智能配饰</a> <a href="#">智能家居</a> <a href="#">体感车</a>
<a href="#">其他配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">电子教育</a></dt>
<dd>
<a href="#">电子词典</a> <a href="#">电纸书</a> <a href="#">录音笔</a> <a href="#">复读机</a>
<a href="#">点读机/笔</a> <a href="#">学生平板</a> <a href="#">早教机</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">电脑、办公</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">电脑整机</a></dt>
<dd>
<a href="#">笔记本</a> <a href="#">超极本</a> <a href="#">游戏本</a> <a href="#">平板电脑</a>
<a href="#">平板电脑配件</a> <a href="#">台式机</a> <a href="#">服务器/工作站</a> <a href="#">笔记本配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">电脑配件</a></dt>
<dd>
<a href="#">CPU</a> <a href="#">主板</a> <a href="#">显卡</a> <a href="#">硬盘</a> <a href="#">
SSD固态硬盘</a> <a href="#">内存</a> <a href="#">机箱</a> <a href="#">电源</a> <a href="#">显示器</a>
<a href="#">刻录机/光驱</a> <a href="#">声卡/扩展卡</a> <a href="#">散热器</a> <a href="#">装机配件</a>
<a href="#">组装电脑</a>
</dd>
</dl>
<dl>
<dt><a href="#">外设产品</a></dt>
<dd>
<a href="#">鼠标</a> <a href="#">键盘</a> <a href="#">游戏设备</a> <a href="#">U盘</a> <a href="#">移动硬盘</a> <a href="#">鼠标垫</a> <a href="#">摄像头</a> <a href="#">线缆</a>
<a href="#">电玩</a> <a href="#">手写板</a> <a href="#">外置盒</a> <a href="#">电脑工具</a>
<a href="#">电脑清洁</a> <a href="#">UPS</a> <a href="#">插座</a>
</dd>
</dl>
<dl>
<dt><a href="#">网络产品</a></dt>
<dd>
<a href="#">路由器</a> <a href="#">网卡</a> <a href="#">交换机</a> <a href="#">网络存储</a>
<a href="#">4G/3G上网</a> <a href="#">网络盒子</a> <a href="#">网络配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">办公打印</a></dt>
<dd>
<a href="#">打印机</a> <a href="#">一体机</a> <a href="#">投影机</a> <a href="#">投影配件</a>
<a href="#">传真机</a> <a href="#">复合机</a> <a href="#">碎纸机</a> <a href="#">扫描仪</a>
<a href="#">墨盒</a> <a href="#">硒鼓</a> <a href="#">墨粉</a> <a href="#">色带</a>
</dd>
</dl>
<dl>
<dt><a href="#">办公文仪</a></dt>
<dd>
<a href="#">办公文具</a> <a href="#">文件管理</a> <a href="#">笔类</a> <a href="#">纸类</a>
<a href="#">本册/便签</a> <a href="#">学生文具</a> <a href="#">财务用品</a> <a href="#">计算器</a>
<a href="#">激光笔</a> <a href="#">白板/封装</a> <a href="#">考勤机</a> <a href="#">刻录碟片/附件</a>
<a href="#">点钞机</a> <a href="#">支付设备/POS机</a> <a href="#">安防监控</a> <a href="#">呼叫/会议设备</a>
<a href="#">保险柜</a> <a href="#">办公家具</a>
</dd>
</dl>
<dl>
<dt><a href="#">服务产品</a></dt>
<dd>
<a href="#">上门服务</a> <a href="#">远程服务</a> <a href="#">电脑软件</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">家居、家具、家装、厨具</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">厨具</a></dt>
<dd>
<a href="#">烹饪锅具</a> <a href="#">刀剪菜板</a> <a href="#">厨房配件</a> <a href="#">水具酒具</a>
<a href="#">餐具</a> <a href="#">茶具/咖啡具</a>
</dd>
</dl>
<dl>
<dt><a href="#">家装建材</a></dt>
<dd>
<a href="#">灯饰照明</a> <a href="#">厨房卫浴</a> <a href="#">五金工具</a> <a href="#">电工电料</a>
<a href="#">墙地面材料</a> <a href="#">装饰材料</a> <a href="#">装修服务</a> <a href="#">吸顶灯</a>
<a href="#">淋浴花洒</a> <a href="#">开关插座</a> <a href="#">油漆涂料</a> <a href="#">龙头</a>
</dd>
</dl>
<dl>
<dt><a href="#">家纺</a></dt>
<dd>
<a href="#">床品套件</a> <a href="#">被子</a> <a href="#">蚊帐</a> <a href="#">凉席</a> <a href="#">床单被罩</a> <a href="#">枕芯</a> <a href="#">毛巾浴巾</a> <a href="#">布艺软饰</a>
<a href="#">毯子</a> <a href="#">抱枕靠垫</a> <a href="#">床垫/床褥</a> <a href="#">窗帘/窗纱</a>
<a href="#">电热毯</a>
</dd>
</dl>
<dl>
<dt><a href="#">家具</a></dt>
<dd>
<a href="#">卧室家具</a> <a href="#">客厅家具</a> <a href="#">餐厅家具</a> <a href="#">书房家具</a>
<a href="#">储物家具</a> <a href="#">阳台/户外</a> <a href="#">商业办公</a> <a href="#">床</a>
<a href="#">床垫</a> <a href="#">沙发</a> <a href="#">电脑椅</a> <a href="#">衣柜</a> <a href="#">
茶几</a> <a href="#">电视柜</a> <a href="#">餐桌</a> <a href="#">电脑桌</a> <a href="#">鞋架/衣帽架</a>
</dd>
</dl>
<dl>
<dt><a href="#">灯具</a></dt>
<dd>
<a href="#">台灯</a> <a href="#">吸顶灯</a> <a href="#">筒灯射灯</a> <a href="#">LED灯</a>
<a href="#">节能灯</a> <a href="#">落地灯</a> <a href="#">五金电器</a> <a href="#">应急灯/手电</a>
<a href="#">装饰灯</a> <a href="#">吊灯</a> <a href="#">氛围照明</a>
</dd>
</dl>
<dl>
<dt><a href="#">生活日用</a></dt>
<dd>
<a href="#">收纳用品</a> <a href="#">雨伞雨具</a> <a href="#">浴室用品</a> <a href="#">缝纫/针织用品</a>
<a href="#">洗晒/熨烫</a> <a href="#">净化除味</a>
</dd>
</dl>
<dl>
<dt><a href="#">家装软饰</a></dt>
<dd>
<a href="#">桌布/罩件</a> <a href="#">地毯地垫</a> <a href="#">沙发垫套/椅垫</a> <a href="#">帘艺隔断</a>
<a href="#">相框/照片墙</a> <a href="#">装饰字画</a> <a href="#">墙贴/装饰贴</a> <a href="#">节庆饰品</a>
<a href="#">手工/十字绣</a> <a href="#">钟饰</a> <a href="#">装饰摆件</a> <a href="#">花瓶花艺</a>
<a href="#">创意家居</a> <a href="#">保暖防护</a> <a href="#">香薰蜡烛</a>
</dd>
</dl>
<dl>
<dt><a href="#">清洁用品</a></dt>
<dd>
<a href="#">纸品湿巾</a> <a href="#">衣物清洁</a> <a href="#">清洁工具</a> <a href="#">家庭清洁</a>
<a href="#">一次性用品</a> <a href="#">驱虫用品</a> <a href="#">皮具护理</a>
</dd>
</dl>
<dl>
<dt><a href="#">宠物生活</a></dt>
<dd>
<a href="#">宠物主粮</a> <a href="#">宠物零食</a> <a href="#">洗护美容</a> <a href="#">家居日用</a>
<a href="#">医疗保健</a> <a href="#">出行装备</a> <a href="#">宠物玩具</a> <a href="#">水族用品</a>
<a href="#">猫砂/尿布</a> <a href="#">宠物牵引</a> <a href="#">宠物驱虫</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">服饰内衣、珠宝首饰</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">女装</a></dt>
<dd>
<a href="#">连衣裙</a> <a href="#">蕾丝/雪纺衫</a> <a href="#">衬衫</a> <a href="#">T恤</a>
<a href="#">半身裙</a> <a href="#">休闲裤</a> <a href="#">短裤</a> <a href="#">牛仔裤</a> <a href="#">针织衫</a> <a href="#">吊带/背心</a> <a href="#">打底衫</a> <a href="#">打底裤</a>
<a href="#">正装裤</a> <a href="#">小西服</a> <a href="#">马甲</a> <a href="#">风衣</a> <a href="#">羊毛衫</a> <a href="#">羊绒衫</a> <a href="#">短外套</a> <a href="#">棉服</a>
<a href="#">毛呢大衣</a> <a href="#">加绒裤</a> <a href="#">羽绒服</a> <a href="#">皮草</a>
<a href="#">真皮皮衣</a> <a href="#">仿皮皮衣</a> <a href="#">旗袍/唐装</a> <a href="#">礼服</a>
<a href="#">婚纱</a> <a href="#">中老年女装</a> <a href="#">大码女装</a> <a href="#">设计师/潮牌</a>
</dd>
</dl>
<dl>
<dt><a href="#">男装</a></dt>
<dd>
<a href="#">衬衫</a> <a href="#">T恤</a> <a href="#">POLO衫</a> <a href="#">针织衫</a>
<a href="#">夹克</a> <a href="#">卫衣</a> <a href="#">风衣</a> <a href="#">马甲/背心</a> <a href="#">短裤</a> <a href="#">休闲裤</a> <a href="#">牛仔裤</a> <a href="#">西服</a> <a href="#">
西裤</a> <a href="#">西服套装</a> <a href="#">真皮皮衣</a> <a href="#">仿皮皮衣</a> <a href="#">羽绒服</a>
<a href="#">毛呢大衣</a> <a href="#">棉服</a> <a href="#">羊绒衫</a> <a href="#">羊毛衫</a>
<a href="#">卫裤/运动裤</a> <a href="#">加绒裤</a> <a href="#">设计师/潮牌</a> <a href="#">唐装/中山装</a>
<a href="#">工装</a> <a href="#">中老年男装</a> <a href="#">大码男装</a>
</dd>
</dl>
<dl>
<dt><a href="#">内衣</a></dt>
<dd>
<a href="#">文胸</a> <a href="#">睡衣/家居服</a> <a href="#">情侣睡衣</a> <a href="#">文胸套装</a>
<a href="#">少女文胸</a> <a href="#">女式内裤</a> <a href="#">男式内裤</a> <a href="#">商务男袜</a>
<a href="#">休闲棉袜</a> <a href="#">吊带/背心</a> <a href="#">打底衫</a> <a href="#">抹胸</a>
<a href="#">连裤袜/丝袜</a> <a href="#">美腿袜</a> <a href="#">打底裤袜</a> <a href="#">塑身美体</a>
<a href="#">大码内衣</a> <a href="#">内衣配件</a> <a href="#">泳衣</a> <a href="#">秋衣秋裤</a>
<a href="#">保暖内衣</a>
</dd>
</dl>
<dl>
<dt><a href="#">服饰配件</a></dt>
<dd>
<a href="#">太阳镜</a> <a href="#">光学镜架/镜片</a> <a href="#">防辐射眼镜</a> <a href="#">女士丝巾/围巾/披肩</a>
<a href="#">棒球帽</a> <a href="#">遮阳伞/雨伞</a> <a href="#">遮阳帽</a> <a href="#">领带/领结/领带夹</a>
<a href="#">男士腰带/礼盒</a> <a href="#">防晒手套</a> <a href="#">老花镜</a> <a href="#">袖扣</a>
<a href="#">男士丝巾/围巾</a> <a href="#">装饰眼镜</a> <a href="#">女士腰带/礼盒</a> <a href="#">游泳镜</a>
</dd>
</dl>
<dl>
<dt><a href="#">珠宝首饰</a></dt>
<dd>
<a href="#">时尚饰品</a> <a href="#">钻石</a> <a href="#">翡翠玉石</a> <a href="#">纯金K金饰品</a>
<a href="#">金银投资</a> <a href="#">银饰</a> <a href="#">水晶玛瑙</a> <a href="#">彩宝</a>
<a href="#">铂金</a> <a href="#">天然木饰</a> <a href="#">珍珠</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">个护化妆</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">面部护肤</a></dt>
<dd>
<a href="#">清洁</a> <a href="#">护肤</a> <a href="#">面膜</a> <a href="#">剃须</a> <a href="#">
套装</a>
</dd>
</dl>
<!-- <dl>
<dt><a href="#">洗发护发</a></dt>
<dd>
<a href="#">洗发</a> <a href="#">护发</a> <a href="#">染发</a> <a href="#">造型</a> <a href="#">
假发</a> <a href="#">套装</a>
</dd>
</dl>
<dl>
<dt><a href="#">身体护肤</a></dt>
<dd>
<a href="#">沐浴</a> <a href="#">润肤</a> <a href="#">颈部</a> <a href="#">手足</a> <a href="#">
纤体塑形</a> <a href="#">美胸</a> <a href="#">套装</a>
</dd>
</dl>
<dl>
<dt><a href="#">口腔护理</a></dt>
<dd>
<a href="#">牙膏/牙粉</a> <a href="#">牙刷/牙线</a> <a href="#">漱口水</a> <a href="#">套装</a>
</dd>
</dl>
<dl>
<dt><a href="#">女性护理</a></dt>
<dd>
<a href="#">卫生巾</a> <a href="#">卫生护垫</a> <a href="#">私密护理</a> <a href="#">脱毛膏</a>
</dd>
</dl>
<dl>
<dt><a href="#">香水彩妆</a></dt>
<dd>
<a href="#">香水</a> <a href="#">底妆</a> <a href="#">腮红</a> <a href="#">眼部</a> <a href="#">
唇部</a> <a href="#">美甲</a> <a href="#">美容工具</a> <a href="#">套装</a>
</dd>
</dl>-->
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">鞋靴、箱包、钟表、奢侈品</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">时尚女鞋</a></dt>
<dd>
<a href="#">凉鞋</a> <a href="#">单鞋</a> <a href="#">高跟鞋</a> <a href="#">坡跟鞋</a> <a href="#">松糕鞋</a> <a href="#">鱼嘴鞋</a> <a href="#">休闲鞋</a> <a href="#">帆布鞋</a>
<a href="#">拖鞋/人字拖</a> <a href="#">妈妈鞋</a> <a href="#">防水台</a> <a href="#">雨鞋/雨靴</a>
<a href="#">内增高</a> <a href="#">布鞋/绣花鞋</a> <a href="#">女靴</a> <a href="#">雪地靴</a>
<a href="#">踝靴</a> <a href="#">马丁靴</a> <a href="#">鞋配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">流行男鞋</a></dt>
<dd>
<a href="#">休闲鞋</a> <a href="#">凉鞋/沙滩鞋</a> <a href="#">帆布鞋</a> <a href="#">商务休闲鞋</a>
<a href="#">正装鞋</a> <a href="#">增高鞋</a> <a href="#">拖鞋/人字拖</a> <a href="#">工装鞋</a>
<a href="#">男靴</a> <a href="#">传统布鞋</a> <a href="#">功能鞋</a> <a href="#">鞋配件</a>
<a href="#">定制鞋</a>
</dd>
</dl>
<dl>
<dt><a href="#">潮流女包</a></dt>
<dd>
<a href="#">单肩包</a> <a href="#">手提包</a> <a href="#">斜挎包</a> <a href="#">双肩包</a>
<a href="#">钱包</a> <a href="#">手拿包/晚宴包</a> <a href="#">卡包/零钱包</a> <a href="#">钥匙包</a>
</dd>
</dl>
<dl>
<dt><a href="#">精品男包</a></dt>
<dd>
<a href="#">商务公文包</a> <a href="#">单肩/斜挎包</a> <a href="#">男士手包</a> <a href="#">双肩包</a>
<a href="#">钱包/卡包</a> <a href="#">钥匙包</a>
</dd>
</dl>
<dl>
<dt><a href="#">功能箱包</a></dt>
<dd>
<a href="#">拉杆箱/拉杆包</a> <a href="#">旅行包</a> <a href="#">电脑包</a> <a href="#">休闲运动包</a>
<a href="#">相机包</a> <a href="#">腰包/胸包</a> <a href="#">登山包</a> <a href="#">旅行配件</a>
<a href="#">书包</a> <a href="#">妈咪包</a>
</dd>
</dl>
<dl>
<dt><a href="#">奢侈品</a></dt>
<dd>
<a href="#">箱包</a> <a href="#">钱包</a> <a href="#">服饰</a> <a href="#">腰带</a> <a href="#">
鞋靴</a> <a href="#">太阳镜/眼镜框</a> <a href="#">饰品</a> <a href="#">配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">钟表</a></dt>
<dd>
<a href="#">男表</a> <a href="#">女表</a> <a href="#">儿童表</a> <a href="#">座钟挂钟</a>
</dd>
</dl>
<dl>
<dt><a href="#">礼品</a></dt>
<dd>
<a href="#">火机烟具</a> <a href="#">军刀军具</a> <a href="#">美妆礼品</a> <a href="#">工艺礼品</a>
<a href="#">礼盒礼券</a> <a href="#">礼品文具</a> <a href="#">收藏品</a> <a href="#">古董把玩</a>
<a href="#">地方礼品</a> <a href="#">创意礼品</a> <a href="#">婚庆用品</a> <a href="#">鲜花绿植</a>
<a href="#">京东卡</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">运动户外</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">运动鞋包</a></dt>
<dd>
<a href="#">休闲鞋</a> <a href="#">跑步鞋</a> <a href="#">板鞋</a> <a href="#">帆布鞋</a> <a href="#">篮球鞋</a> <a href="#">足球鞋</a> <a href="#">乒羽网鞋</a> <a href="#">专项运动鞋</a>
<a href="#">训练鞋</a> <a href="#">拖鞋</a> <a href="#">运动包</a>
</dd>
</dl>
<dl>
<dt><a href="#">运动服饰</a></dt>
<dd>
<a href="#">卫衣/套头衫</a> <a href="#">毛衫/线衫</a> <a href="#">夹克/风衣</a> <a href="#">棉服</a>
<a href="#">羽绒服</a> <a href="#">T恤</a> <a href="#">乒羽网服</a> <a href="#">训练服</a>
<a href="#">运动背心</a> <a href="#">运动裤</a> <a href="#">运动套装</a> <a href="#">运动配饰</a>
</dd>
</dl>
<dl>
<dt><a href="#">健身训练</a></dt>
<dd>
<a href="#">跑步机</a> <a href="#">健身车/动感单车</a> <a href="#">综合训练器</a> <a href="#">其他大型器械</a>
<a href="#">哑铃</a> <a href="#">仰卧板/收腹机</a> <a href="#">其他中小型器材</a> <a href="#">武术搏击</a>
<a href="#">运动护具</a> <a href="#">瑜伽舞蹈</a>
</dd>
</dl>
<dl>
<dt><a href="#">骑行运动</a></dt>
<dd>
<a href="#">山地车/公路车</a> <a href="#">折叠车</a> <a href="#">电动车</a> <a href="#">其他整车</a>
<a href="#">骑行装备</a> <a href="#">骑行服</a>
</dd>
</dl>
<dl>
<dt><a href="#">体育用品</a></dt>
<dd>
<a href="#">乒乓球</a> <a href="#">羽毛球</a> <a href="#">网球</a> <a href="#">篮球</a> <a href="#">足球</a> <a href="#">高尔夫</a> <a href="#">台球</a> <a href="#">轮滑滑板</a>
<a href="#">排球</a> <a href="#">棋牌麻将</a> <a href="#">其它</a>
</dd>
</dl>
<dl>
<dt><a href="#">户外鞋服</a></dt>
<dd>
<a href="#">冲锋衣裤</a> <a href="#">速干衣裤</a> <a href="#">滑雪服</a> <a href="#">羽绒服/棉服</a>
<a href="#">休闲衣裤</a> <a href="#">抓绒衣裤</a> <a href="#">软壳衣裤</a> <a href="#">T恤</a>
<a href="#">户外风衣</a> <a href="#">功能内衣</a> <a href="#">军迷服饰</a> <a href="#">登山鞋</a>
<a href="#">徒步鞋</a> <a href="#">越野跑鞋</a> <a href="#">休闲鞋</a> <a href="#">雪地靴</a>
<a href="#">工装鞋</a> <a href="#">溯溪鞋</a> <a href="#">沙滩/凉拖</a> <a href="#">户外袜</a>
</dd>
</dl>
<dl>
<dt><a href="#">户外装备</a></dt>
<dd>
<a href="#">背包</a> <a href="#">帐篷/垫子</a> <a href="#">睡袋/吊床</a> <a href="#">登山攀岩</a>
<a href="#">户外照明</a> <a href="#">野餐烧烤</a> <a href="#">便携桌椅床</a> <a href="#">户外工具</a>
<a href="#">望远镜</a> <a href="#">户外仪表</a> <a href="#">旅游用品</a> <a href="#">军迷用品</a>
<a href="#">救援装备</a> <a href="#">滑雪装备</a> <a href="#">极限户外</a> <a href="#">冲浪潜水</a>
<a href="#">户外配饰</a>
</dd>
</dl>
<dl>
<dt><a href="#">垂钓用品</a></dt>
<dd>
<a href="#">鱼竿鱼线</a> <a href="#">浮漂鱼饵</a> <a href="#">钓鱼桌椅</a> <a href="#">钓鱼配件</a>
<a href="#">钓箱鱼包</a> <a href="#">其它</a>
</dd>
</dl>
<dl>
<dt><a href="#">游泳用品</a></dt>
<dd>
<a href="#">泳镜</a> <a href="#">泳帽</a> <a href="#">游泳包防水包</a> <a href="#">男士泳衣</a>
<a href="#">女士泳衣</a> <a href="#">比基尼</a> <a href="#">其它</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">汽车用品</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">维修保养</a></dt>
<dd>
<a href="#">润滑油</a> <a href="#">添加剂</a> <a href="#">防冻液</a> <a href="#">滤清器</a>
<a href="#">火花塞</a> <a href="#">雨刷</a> <a href="#">车灯</a> <a href="#">后视镜</a> <a href="#">轮胎</a> <a href="#">轮毂</a> <a href="#">刹车片/盘</a> <a href="#">喇叭/皮带</a>
<a href="#">蓄电池</a> <a href="#">底盘装甲/护板</a> <a href="#">贴膜</a> <a href="#">汽修工具</a>
</dd>
</dl>
<dl>
<dt><a href="#">车载电器</a></dt>
<dd>
<a href="#">导航仪</a> <a href="#">安全预警仪</a> <a href="#">行车记录仪</a> <a href="#">倒车雷达</a>
<a href="#">蓝牙设备</a> <a href="#">时尚影音</a> <a href="#">净化器</a> <a href="#">电源</a>
<a href="#">冰箱</a> <a href="#">吸尘器</a>
</dd>
</dl>
<dl>
<dt><a href="#">美容清洗</a></dt>
<dd>
<a href="#">车蜡</a> <a href="#">补漆笔</a> <a href="#">玻璃水</a> <a href="#">清洁剂</a> <a href="#">洗车工具</a> <a href="#">洗车配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">汽车装饰</a></dt>
<dd>
<a href="#">脚垫</a> <a href="#">座垫</a> <a href="#">座套</a> <a href="#">后备箱垫</a> <a href="#">头枕腰靠</a> <a href="#">香水</a> <a href="#">空气净化</a> <a href="#">车内饰品</a>
<a href="#">功能小件</a> <a href="#">车身装饰件</a> <a href="#">车衣</a>
</dd>
</dl>
<dl>
<dt><a href="#">安全自驾</a></dt>
<dd>
<a href="#">安全座椅</a> <a href="#">胎压充气</a> <a href="#">防盗设备</a> <a href="#">应急救援</a>
<a href="#">保温箱</a> <a href="#">储物箱</a> <a href="#">自驾野营</a> <a href="#">摩托车装备</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">母婴、玩具乐器</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">奶粉</a></dt>
<dd>
<a href="#">婴幼奶粉</a> <a href="#">成人奶粉</a>
</dd>
</dl>
<dl>
<dt><a href="#">营养辅食</a></dt>
<dd>
<a href="#">DHA</a> <a href="#">钙铁锌/维生素</a> <a href="#">益生菌/初乳</a> <a href="#">清火/开胃</a>
<a href="#">米粉/菜粉</a> <a href="#">果泥/果汁</a> <a href="#">面条/粥</a> <a href="#">宝宝零食</a>
</dd>
</dl>
<dl>
<dt><a href="#">尿裤湿巾</a></dt>
<dd>
<a href="#">婴儿尿裤</a> <a href="#">拉拉裤</a> <a href="#">成人尿裤</a> <a href="#">湿巾</a>
</dd>
</dl>
<dl>
<dt><a href="#">洗护用品</a></dt>
<dd>
<a href="#">宝宝护肤</a> <a href="#">宝宝洗浴</a> <a href="#">理发器</a> <a href="#">洗衣液/皂</a>
<a href="#">奶瓶清洗</a> <a href="#">日常护理</a> <a href="#">座便器</a> <a href="#">驱蚊防蚊</a>
</dd>
</dl>
<dl>
<dt><a href="#">喂养用品</a></dt>
<dd>
<a href="#">奶瓶奶嘴</a> <a href="#">吸奶器</a> <a href="#">牙胶安抚</a> <a href="#">暖奶消毒</a>
<a href="#">辅食料理机</a> <a href="#">碗盘叉勺</a> <a href="#">水壶/水杯</a>
</dd>
</dl>
<dl>
<dt><a href="#">童车童床</a></dt>
<dd>
<a href="#">婴儿床</a> <a href="#">婴儿推车</a> <a href="#">餐椅摇椅</a> <a href="#">学步车</a>
<a href="#">三轮车</a> <a href="#">自行车</a> <a href="#">扭扭车</a> <a href="#">滑板车</a>
<a href="#">电动车</a>
</dd>
</dl>
<dl>
<dt><a href="#">安全座椅</a></dt>
<dd>
<a href="#">提篮式</a> <a href="#">安全座椅</a> <a href="#">增高垫</a>
</dd>
</dl>
<dl>
<dt><a href="#">寝居服饰</a></dt>
<dd>
<a href="#">婴儿外出服</a> <a href="#">婴儿内衣</a> <a href="#">婴儿礼盒</a> <a href="#">婴儿鞋帽袜</a>
<a href="#">家居床品</a> <a href="#">安全防护</a>
</dd>
</dl>
<dl>
<dt><a href="#">妈妈专区</a></dt>
<dd>
<a href="#">妈咪包/背婴带</a> <a href="#">待产/新生</a> <a href="#">产后塑身</a> <a href="#">文胸/内裤</a>
<a href="#">防辐射服</a> <a href="#">孕妇装</a> <a href="#">月子装</a> <a href="#">孕期营养</a>
<a href="#">孕妈美容</a>
</dd>
</dl>
<dl class="0">
<dt><a href="#">童装童鞋</a></dt>
<dd>
<a href="#">套装</a> <a href="#">上衣</a> <a href="#">裤子</a> <a href="#">裙子</a> <a href="#">
内衣</a> <a href="#">羽绒服/棉服</a> <a href="#">亲子装</a> <a href="#">配饰</a> <a href="#">演出服</a>
<a href="#">运动服</a> <a href="#">运动鞋</a> <a href="#">皮鞋/帆布鞋</a> <a href="#">靴子</a>
<a href="#">凉鞋</a> <a href="#">功能鞋</a>
</dd>
</dl>
<dl class="1">
<dt><a href="#">玩具乐器</a></dt>
<dd>
<a href="#">适用年龄</a> <a href="#">遥控/电动</a> <a href="#">毛绒布艺</a> <a href="#">娃娃玩具</a>
<a href="#">模型玩具</a> <a href="#">健身玩具</a> <a href="#">动漫玩具</a> <a href="#">益智玩具</a>
<a href="#">积木拼插</a> <a href="#">DIY玩具</a> <a href="#">创意减压</a> <a href="#">乐器相关</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">食品饮料、酒类、生鲜</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">中外名酒</a></dt>
<dd>
<a href="#">白酒</a> <a href="#">葡萄酒</a> <a href="#">洋酒</a> <a href="#">啤酒</a> <a href="#">
黄酒/养生酒</a> <a href="#">收藏酒/陈年老酒</a>
</dd>
</dl>
<dl>
<dt><a href="#">进口食品</a></dt>
<dd>
<a href="#">牛奶</a> <a href="#">饼干蛋糕</a> <a href="#">糖果/巧克力</a> <a href="#">休闲零食</a>
<a href="#">冲调饮品</a> <a href="#">粮油调味</a>
</dd>
</dl>
<dl>
<dt><a href="#">休闲食品</a></dt>
<dd>
<a href="#">休闲零食</a> <a href="#">坚果炒货</a> <a href="#">肉干肉脯</a> <a href="#">蜜饯果干</a>
<a href="#">糖果/巧克力</a> <a href="#">饼干蛋糕</a> <a href="#">无糖食品</a>
</dd>
</dl>
<dl>
<dt><a href="#">地方特产</a></dt>
<dd>
<a href="#">*</a> <a href="#">四川</a> <a href="#">云南</a> <a href="#">湖南</a> <a href="#">
内蒙</a> <a href="#">北京</a> <a href="#">山西</a> <a href="#">福建</a> <a href="#">东北</a>
<a href="#">其他</a>
</dd>
</dl>
<dl>
<dt><a href="#">茗茶</a></dt>
<dd>
<a href="#">铁观音</a> <a href="#">普洱</a> <a href="#">龙井</a> <a href="#">绿茶</a> <a href="#">
红茶</a> <a href="#">乌龙茶</a> <a href="#">花草茶</a> <a href="#">花果茶</a> <a href="#">黑茶</a>
<a href="#">白茶</a> <a href="#">养生茶</a> <a href="#">其他茶</a>
</dd>
</dl>
<dl>
<dt><a href="#">饮料冲调</a></dt>
<dd>
<a href="#">牛奶乳品</a> <a href="#">饮料</a> <a href="#">饮用水</a> <a href="#">咖啡/奶茶</a>
<a href="#">蜂蜜/柚子茶</a> <a href="#">冲饮谷物</a> <a href="#">成人奶粉</a>
</dd>
</dl>
<dl>
<dt><a href="#">粮油调味</a></dt>
<dd>
<a href="#">米面杂粮</a> <a href="#">食用油</a> <a href="#">调味品</a> <a href="#">南北干货</a>
<a href="#">方便食品</a> <a href="#">有机食品</a>
</dd>
</dl>
<dl>
<dt><a href="#">生鲜食品</a></dt>
<dd>
<a href="#">水果蔬菜</a> <a href="#">海鲜水产</a> <a href="#">海参</a> <a href="#">牛排</a>
<a href="#">肉禽蛋奶</a> <a href="#">熟食腊味</a> <a href="#">环球美食</a> <a href="#">产地直供</a>
</dd>
</dl>
<dl>
<dt><a href="#">食品礼券</a></dt>
<dd>
<a href="#">大闸蟹</a> <a href="#">粽子</a> <a href="#">月饼</a> <a href="#">卡券</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">营养保健</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">营养健康</a></dt>
<dd>
<a href="#">调节免疫</a> <a href="#">调节三高</a> <a href="#">缓解疲劳</a> <a href="#">美体塑身</a>
<a href="#">美容养颜</a> <a href="#">肝肾养护</a> <a href="#">肠胃养护</a> <a href="#">明目益智</a>
<a href="#">骨骼健康</a> <a href="#">改善睡眠</a> <a href="#">抗氧化</a> <a href="#">耐缺氧</a>
</dd>
</dl>
<dl>
<dt><a href="#">营养成分</a></dt>
<dd>
<a href="#">维生素/矿物质</a> <a href="#">蛋白质</a> <a href="#">鱼油/磷脂</a> <a href="#">螺旋藻</a>
<a href="#">番茄红素</a> <a href="#">叶酸</a> <a href="#">葡萄籽</a> <a href="#">左旋肉碱</a>
<a href="#">辅酶Q10</a> <a href="#">益生菌</a> <a href="#">玛咖</a> <a href="#">膳食纤维</a>
<a href="#">牛初乳</a> <a href="#">胶原蛋白</a> <a href="#">大豆异黄酮</a> <a href="#">芦荟提取</a>
<a href="#">酵素</a>
</dd>
</dl>
<dl>
<dt><a href="#">传统滋补</a></dt>
<dd>
<a href="#">蜂产品</a> <a href="#">阿胶</a> <a href="#">参类</a> <a href="#">冬虫夏草</a> <a href="#">燕窝</a> <a href="#">海参</a> <a href="#">养生茶饮</a> <a href="#">鹿茸</a> <a href="#">
灵芝</a> <a href="#">药食同源</a>
</dd>
</dl>
<dl>
<dt><a href="#">成人用品</a></dt>
<dd>
<a href="#">安全避孕</a> <a href="#">验孕测孕</a> <a href="#">人体润滑</a> <a href="#">情爱玩具</a>
<a href="#">情趣内衣</a>
</dd>
</dl>
<dl>
<dt><a href="#">保健器械</a></dt>
<dd>
<a href="#">血压仪器</a> <a href="#">血糖用品</a> <a href="#">养生器械</a> <a href="#">康复辅助</a>
<a href="#">中医保健</a> <a href="#">家庭护理</a> <a href="#">呼吸制氧</a>
</dd>
</dl>
<dl>
<dt><a href="#">急救卫生</a></dt>
<dd>
<a href="#">口罩</a> <a href="#">跌打损伤</a> <a href="#">防裂抗冻</a> <a href="#">眼部保健</a>
<a href="#">鼻炎健康</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
</ul>
</body> </html>

优化:如果二级菜单内容较少或者较多,可以让二级菜单的位置根据内容区域与一级菜单的位置,动态的进行调整。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<style type="text/css">
body
{
padding: 0;
font-size: 10pt;
behavior:url(css/csshover.htc);
}
.topmenu
{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
.toptitle
{
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
padding-left: 20px;
}
.topmenu li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background-image: url(1.png);
background-repeat: no-repeat;
background-position: right;
}
.topmenu li a
{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover
{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.topmenu .lihover /*鼠标移动到上面时,应用的样式*/
{
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
height:60px;
border-left:4px solid #e4393c; }
.topmenu .lihover .submenu /*悬浮层*/
{
display: block;
} .topmenu .lihover span /*白色小方框*/
{
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 60px;
float: right;
position: relative;
} .topmenu li b
{
display:none; } .topmenu .lihover b
{
display:block;
height:30px;
line-height:30px;
font-weight:normal;
font-size:10pt;
} .submenu
{
display: none;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
}
.leftdiv
{
float: left;
width: 490px;
margin: 5px;
}
.rightdiv
{
float: left;
width: 200px;
margin: 5px;
} .leftdiv dl
{
display: block;
border-bottom: 1px solid #EEE;
padding-bottom: 6px;
overflow: hidden;
}
.leftdiv dl dt
{
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
} .leftdiv dl dt a
{
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
}
.leftdiv dl dd
{
display: block;
overflow: hidden;
}
.leftdiv dl dd a
{
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
} .rightdiv dl dd
{
margin: 3px 0;
} .rightdiv dl dt
{
color: #e4393c;
font-weight: bold;
font-size: 10pt;
} .rightdiv dl dd a
{
font-size: 9pt;
color: #737373;
line-height: 22px;
}
.rightdiv dl dd a:hover
{
color: #737373;
font-weight: normal;
} .rightPic
{
position:relative;
right:-35px;
bottom:-30px; }
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var Lis = document.getElementsByTagName("li");
for (i = 0; i < Lis.length; i++) {
Lis[i].i = i;
Lis[i].onmouseover = function () {
this.className = "lihover"; var h0 = (this.i - 1) * 30 + 42;
var y = this.getElementsByTagName("div")[0].offsetHeight;
var h = this.getElementsByTagName("div")[0].style.top + y; if (h < h0) {
this.getElementsByTagName("div")[0].style.top = h0 + "px";
} if (y > 550) {
this.getElementsByTagName("div")[0].style.top = "3px";
}
} Lis[i].onmouseout = function () {
this.className = "";
}
} }
</script>
<ul class="topmenu">
<div class="toptitle">
全部商品分类
</div>
<li><a href="#">图书、音像、数字商品</a><span></span> <b><a href="#">文学</a> <a href="#">经管</a>
<a href="#">畅读VIP</a></b>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">电子书</a></dt>
<dd>
<a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
<a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
</dd>
</dl>
<dl>
<dt><a href="#">数字音乐</a></dt>
<dd>
<a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
<a href="#">乡村民谣</a> <a href="#">有声读物</a>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
</dd>
</dl>
<dl>
<dt><a href="#">文艺</a></dt>
<dd>
<a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
href="#">艺术</a>
</dd>
</dl>
<dl>
<dt><a href="#">人文社科</a></dt>
<dd>
<a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
<a href="#">哲学/宗教</a> <a href="#">社会科学</a>
</dd>
</dl>
<dl>
<dt><a href="#">经管励志</a></dt>
<dd>
<a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
</dd>
</dl>
<dl class="fore7">
<dt><a href="#">生活</a></dt>
<dd>
<a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
<a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
<a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
</dd>
</dl>
<dl>
<dt><a href="#">科技</a></dt>
<dd>
<a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
</dd>
</dl>
<dl>
<dt><a href="#">少儿</a></dt>
<dd>
<a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
<a href="#">11-14岁</a>
</dd>
</dl>
<dl>
<dt><a href="#">教育</a></dt>
<dd>
<a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
</dd>
</dl>
<dl>
<dt><a href="#">其它</a></dt>
<dd>
<a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
<a href="#">杂志/期刊</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
width="194" height="70" title="\家电">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
width="194" height="70" title="小家电--三请聚宝盆">
</a>
</dd>
</dl>
<dl>
<dt>推荐品牌</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>
<img src="wii.png" class="rightPic" />
</div>
</div>
</li>
<li><a href="#">家用电器</a> <span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">大 家 电</a></dt>
<dd>
<a href="#">平板电视</a> <a href="#">空调</a> <a href="#">冰箱</a> <a href="#">洗衣机</a> <a
href="#">家庭影院</a> <a href="#">DVD</a> <a href="#">迷你音响</a> <a href="#">烟机/灶具</a>
<a href="#">热水器</a> <a href="#">消毒柜/洗碗机</a> <a href="#">酒柜/冷柜</a> <a href="#">家电配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">生活电器</a></dt>
<dd>
<a href="#">电风扇</a> <a href="#">冷风扇</a> <a href="#">净化器</a> <a href="#">饮水机</a>
<a href="#">净水设备</a> <a href="#">挂烫机/熨斗</a> <a href="#">吸尘器</a> <a href="#">电话机</a>
<a href="#">插座</a> <a href="#">收录/音机</a> <a href="#">清洁机</a> <a href="#">加湿器</a>
<a href="#">除湿/干衣机</a> <a href="#">取暖电器</a> <a href="#">其它生活电器</a>
</dd>
</dl>
<dl>
<dt><a href="#">厨房电器</a></dt>
<dd>
<a href="#">电压力锅</a> <a href="#">电饭煲</a> <a href="#">豆浆机</a> <a href="#">面包机</a>
<a href="#">咖啡机</a> <a href="#">微波炉</a> <a href="#">料理/榨汁机</a> <a href="#">电烤箱</a>
<a href="#">电磁炉</a> <a href="#">电饼铛/烧烤盘</a> <a href="#">煮蛋器</a> <a href="#">酸奶机</a>
<a href="#">电水壶/热水瓶</a> <a href="#">电炖锅</a> <a href="#">多用途锅</a> <a href="#">果蔬解毒机</a>
<a href="#">其它厨房电器</a>
</dd>
</dl>
<dl>
<dt><a href="#">个护健康</a></dt>
<dd>
<a href="#">剃须刀</a> <a href="#">剃/脱毛器</a> <a href="#">口腔护理</a> <a href="#">电吹风</a>
<a href="#">美容</a> <a href="#">美发</a> <a href="#">按摩器</a> <a href="#">按摩椅</a> <a
href="#">足浴盆</a> <a href="#">血压计</a> <a href="#">健康秤/厨房秤</a> <a href="#">血糖仪</a>
<a href="#">体温计</a> <a href="#">计步器/脂肪检测仪</a> <a href="#">其它健康电器</a>
</dd>
</dl>
<dl>
<dt><a href="#">五金家装</a></dt>
<dd>
<a href="#">电动工具</a> <a href="#">手动工具</a> <a href="#">仪器仪表</a> <a href="#">浴霸/排气扇</a>
<a href="#">灯具</a> <a href="#">LED灯</a> <a href="#">洁身器</a> <a href="#">水槽</a> <a
href="#">龙头</a> <a href="#">淋浴花洒</a> <a href="#">厨卫五金</a> <a href="#">家具五金</a>
<a href="#">门铃</a> <a href="#">电气开关</a> <a href="#">插座</a> <a href="#">电工电料</a>
<a href="#">监控安防</a> <a href="#">电线/线缆</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">手机、数码</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">手机通讯</a></dt>
<dd>
<a href="#">手机</a> <a href="#">对讲机</a>
</dd>
</dl>
<dl>
<dt><a href="#">京东通信</a></dt>
<dd>
<a href="#">选号中心</a> <a href="#">自助服务</a>
</dd>
</dl>
<dl>
<dt><a href="#">运营商</a></dt>
<dd>
<a href="#">购机送费</a> <a href="#">0元购机</a> <a href="#">选号入网</a>
</dd>
</dl>
<dl>
<dt><a href="#">手机配件</a></dt>
<dd>
<a href="#">电池</a> <a href="#">蓝牙耳机</a> <a href="#">充电器/数据线</a> <a href="#">手机耳机</a>
<a href="#">贴膜</a> <a href="#">存储卡</a> <a href="#">保护套</a> <a href="#">车载</a> <a
href="#">iPhone配件</a> <a href="#">创意配件</a> <a href="#">便携/无线音箱</a> <a href="#">手机饰品</a>
</dd>
</dl>
<dl>
<dt><a href="#">摄影摄像</a></dt>
<dd>
<a href="#">数码相机</a> <a href="#">单电/微单相机</a> <a href="#">单反相机</a> <a href="#">拍立得</a>
<a href="#">运动相机</a> <a href="#">摄像机</a> <a href="#">镜头</a> <a href="#">户外器材</a>
<a href="#">摄影器材</a>
</dd>
</dl>
<dl>
<dt><a href="#">数码配件</a></dt>
<dd>
<a href="#">存储卡</a> <a href="#">读卡器</a> <a href="#">滤镜</a> <a href="#">闪光灯/手柄</a>
<a href="#">相机包</a> <a href="#">三脚架/云台</a> <a href="#">相机清洁</a> <a href="#">相机贴膜</a>
<a href="#">机身附件</a> <a href="#">镜头附件</a> <a href="#">电池/充电器</a> <a href="#">移动电源</a>
</dd>
</dl>
<dl>
<dt><a href="#">时尚影音</a></dt>
<dd>
<a href="#">耳机/耳麦</a> <a href="#">音箱/音响</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a>
<a href="#">数码相框</a> <a href="#">专业音频</a> <a href="#">苹果周边</a>
</dd>
</dl>
<dl>
<dt><a href="#">智能设备</a></dt>
<dd>
<a href="#">智能手环</a> <a href="#">智能手表</a> <a href="#">智能眼镜</a> <a href="#">运动跟踪器</a>
<a href="#">健康监测</a> <a href="#">智能配饰</a> <a href="#">智能家居</a> <a href="#">体感车</a>
<a href="#">其他配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">电子教育</a></dt>
<dd>
<a href="#">电子词典</a> <a href="#">电纸书</a> <a href="#">录音笔</a> <a href="#">复读机</a>
<a href="#">点读机/笔</a> <a href="#">学生平板</a> <a href="#">早教机</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">电脑、办公</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">电脑整机</a></dt>
<dd>
<a href="#">笔记本</a> <a href="#">超极本</a> <a href="#">游戏本</a> <a href="#">平板电脑</a>
<a href="#">平板电脑配件</a> <a href="#">台式机</a> <a href="#">服务器/工作站</a> <a href="#">笔记本配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">电脑配件</a></dt>
<dd>
<a href="#">CPU</a> <a href="#">主板</a> <a href="#">显卡</a> <a href="#">硬盘</a> <a href="#">
SSD固态硬盘</a> <a href="#">内存</a> <a href="#">机箱</a> <a href="#">电源</a> <a href="#">显示器</a>
<a href="#">刻录机/光驱</a> <a href="#">声卡/扩展卡</a> <a href="#">散热器</a> <a href="#">装机配件</a>
<a href="#">组装电脑</a>
</dd>
</dl>
<dl>
<dt><a href="#">外设产品</a></dt>
<dd>
<a href="#">鼠标</a> <a href="#">键盘</a> <a href="#">游戏设备</a> <a href="#">U盘</a> <a
href="#">移动硬盘</a> <a href="#">鼠标垫</a> <a href="#">摄像头</a> <a href="#">线缆</a>
<a href="#">电玩</a> <a href="#">手写板</a> <a href="#">外置盒</a> <a href="#">电脑工具</a>
<a href="#">电脑清洁</a> <a href="#">UPS</a> <a href="#">插座</a>
</dd>
</dl>
<dl>
<dt><a href="#">网络产品</a></dt>
<dd>
<a href="#">路由器</a> <a href="#">网卡</a> <a href="#">交换机</a> <a href="#">网络存储</a>
<a href="#">4G/3G上网</a> <a href="#">网络盒子</a> <a href="#">网络配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">办公打印</a></dt>
<dd>
<a href="#">打印机</a> <a href="#">一体机</a> <a href="#">投影机</a> <a href="#">投影配件</a>
<a href="#">传真机</a> <a href="#">复合机</a> <a href="#">碎纸机</a> <a href="#">扫描仪</a>
<a href="#">墨盒</a> <a href="#">硒鼓</a> <a href="#">墨粉</a> <a href="#">色带</a>
</dd>
</dl>
<dl>
<dt><a href="#">办公文仪</a></dt>
<dd>
<a href="#">办公文具</a> <a href="#">文件管理</a> <a href="#">笔类</a> <a href="#">纸类</a>
<a href="#">本册/便签</a> <a href="#">学生文具</a> <a href="#">财务用品</a> <a href="#">计算器</a>
<a href="#">激光笔</a> <a href="#">白板/封装</a> <a href="#">考勤机</a> <a href="#">刻录碟片/附件</a>
<a href="#">点钞机</a> <a href="#">支付设备/POS机</a> <a href="#">安防监控</a> <a href="#">呼叫/会议设备</a>
<a href="#">保险柜</a> <a href="#">办公家具</a>
</dd>
</dl>
<dl>
<dt><a href="#">服务产品</a></dt>
<dd>
<a href="#">上门服务</a> <a href="#">远程服务</a> <a href="#">电脑软件</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">家居、家具、家装、厨具</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">厨具</a></dt>
<dd>
<a href="#">烹饪锅具</a> <a href="#">刀剪菜板</a> <a href="#">厨房配件</a> <a href="#">水具酒具</a>
<a href="#">餐具</a> <a href="#">茶具/咖啡具</a>
</dd>
</dl>
<dl>
<dt><a href="#">家装建材</a></dt>
<dd>
<a href="#">灯饰照明</a> <a href="#">厨房卫浴</a> <a href="#">五金工具</a> <a href="#">电工电料</a>
<a href="#">墙地面材料</a> <a href="#">装饰材料</a> <a href="#">装修服务</a> <a href="#">吸顶灯</a>
<a href="#">淋浴花洒</a> <a href="#">开关插座</a> <a href="#">油漆涂料</a> <a href="#">龙头</a>
</dd>
</dl>
<dl>
<dt><a href="#">家纺</a></dt>
<dd>
<a href="#">床品套件</a> <a href="#">被子</a> <a href="#">蚊帐</a> <a href="#">凉席</a> <a
href="#">床单被罩</a> <a href="#">枕芯</a> <a href="#">毛巾浴巾</a> <a href="#">布艺软饰</a>
<a href="#">毯子</a> <a href="#">抱枕靠垫</a> <a href="#">床垫/床褥</a> <a href="#">窗帘/窗纱</a>
<a href="#">电热毯</a>
</dd>
</dl>
<dl>
<dt><a href="#">家具</a></dt>
<dd>
<a href="#">卧室家具</a> <a href="#">客厅家具</a> <a href="#">餐厅家具</a> <a href="#">书房家具</a>
<a href="#">储物家具</a> <a href="#">阳台/户外</a> <a href="#">商业办公</a> <a href="#">床</a>
<a href="#">床垫</a> <a href="#">沙发</a> <a href="#">电脑椅</a> <a href="#">衣柜</a> <a href="#">
茶几</a> <a href="#">电视柜</a> <a href="#">餐桌</a> <a href="#">电脑桌</a> <a href="#">鞋架/衣帽架</a>
</dd>
</dl>
<dl>
<dt><a href="#">灯具</a></dt>
<dd>
<a href="#">台灯</a> <a href="#">吸顶灯</a> <a href="#">筒灯射灯</a> <a href="#">LED灯</a>
<a href="#">节能灯</a> <a href="#">落地灯</a> <a href="#">五金电器</a> <a href="#">应急灯/手电</a>
<a href="#">装饰灯</a> <a href="#">吊灯</a> <a href="#">氛围照明</a>
</dd>
</dl>
<dl>
<dt><a href="#">生活日用</a></dt>
<dd>
<a href="#">收纳用品</a> <a href="#">雨伞雨具</a> <a href="#">浴室用品</a> <a href="#">缝纫/针织用品</a>
<a href="#">洗晒/熨烫</a> <a href="#">净化除味</a>
</dd>
</dl>
<dl>
<dt><a href="#">家装软饰</a></dt>
<dd>
<a href="#">桌布/罩件</a> <a href="#">地毯地垫</a> <a href="#">沙发垫套/椅垫</a> <a href="#">帘艺隔断</a>
<a href="#">相框/照片墙</a> <a href="#">装饰字画</a> <a href="#">墙贴/装饰贴</a> <a href="#">节庆饰品</a>
<a href="#">手工/十字绣</a> <a href="#">钟饰</a> <a href="#">装饰摆件</a> <a href="#">花瓶花艺</a>
<a href="#">创意家居</a> <a href="#">保暖防护</a> <a href="#">香薰蜡烛</a>
</dd>
</dl>
<dl>
<dt><a href="#">清洁用品</a></dt>
<dd>
<a href="#">纸品湿巾</a> <a href="#">衣物清洁</a> <a href="#">清洁工具</a> <a href="#">家庭清洁</a>
<a href="#">一次性用品</a> <a href="#">驱虫用品</a> <a href="#">皮具护理</a>
</dd>
</dl>
<dl>
<dt><a href="#">宠物生活</a></dt>
<dd>
<a href="#">宠物主粮</a> <a href="#">宠物零食</a> <a href="#">洗护美容</a> <a href="#">家居日用</a>
<a href="#">医疗保健</a> <a href="#">出行装备</a> <a href="#">宠物玩具</a> <a href="#">水族用品</a>
<a href="#">猫砂/尿布</a> <a href="#">宠物牵引</a> <a href="#">宠物驱虫</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">服饰内衣、珠宝首饰</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">女装</a></dt>
<dd>
<a href="#">连衣裙</a> <a href="#">蕾丝/雪纺衫</a> <a href="#">衬衫</a> <a href="#">T恤</a>
<a href="#">半身裙</a> <a href="#">休闲裤</a> <a href="#">短裤</a> <a href="#">牛仔裤</a> <a
href="#">针织衫</a> <a href="#">吊带/背心</a> <a href="#">打底衫</a> <a href="#">打底裤</a>
<a href="#">正装裤</a> <a href="#">小西服</a> <a href="#">马甲</a> <a href="#">风衣</a> <a
href="#">羊毛衫</a> <a href="#">羊绒衫</a> <a href="#">短外套</a> <a href="#">棉服</a>
<a href="#">毛呢大衣</a> <a href="#">加绒裤</a> <a href="#">羽绒服</a> <a href="#">皮草</a>
<a href="#">真皮皮衣</a> <a href="#">仿皮皮衣</a> <a href="#">旗袍/唐装</a> <a href="#">礼服</a>
<a href="#">婚纱</a> <a href="#">中老年女装</a> <a href="#">大码女装</a> <a href="#">设计师/潮牌</a>
</dd>
</dl>
<dl>
<dt><a href="#">男装</a></dt>
<dd>
<a href="#">衬衫</a> <a href="#">T恤</a> <a href="#">POLO衫</a> <a href="#">针织衫</a>
<a href="#">夹克</a> <a href="#">卫衣</a> <a href="#">风衣</a> <a href="#">马甲/背心</a> <a
href="#">短裤</a> <a href="#">休闲裤</a> <a href="#">牛仔裤</a> <a href="#">西服</a> <a href="#">
西裤</a> <a href="#">西服套装</a> <a href="#">真皮皮衣</a> <a href="#">仿皮皮衣</a> <a href="#">羽绒服</a>
<a href="#">毛呢大衣</a> <a href="#">棉服</a> <a href="#">羊绒衫</a> <a href="#">羊毛衫</a>
<a href="#">卫裤/运动裤</a> <a href="#">加绒裤</a> <a href="#">设计师/潮牌</a> <a href="#">唐装/中山装</a>
<a href="#">工装</a> <a href="#">中老年男装</a> <a href="#">大码男装</a>
</dd>
</dl>
<dl>
<dt><a href="#">内衣</a></dt>
<dd>
<a href="#">文胸</a> <a href="#">睡衣/家居服</a> <a href="#">情侣睡衣</a> <a href="#">文胸套装</a>
<a href="#">少女文胸</a> <a href="#">女式内裤</a> <a href="#">男式内裤</a> <a href="#">商务男袜</a>
<a href="#">休闲棉袜</a> <a href="#">吊带/背心</a> <a href="#">打底衫</a> <a href="#">抹胸</a>
<a href="#">连裤袜/丝袜</a> <a href="#">美腿袜</a> <a href="#">打底裤袜</a> <a href="#">塑身美体</a>
<a href="#">大码内衣</a> <a href="#">内衣配件</a> <a href="#">泳衣</a> <a href="#">秋衣秋裤</a>
<a href="#">保暖内衣</a>
</dd>
</dl>
<dl>
<dt><a href="#">服饰配件</a></dt>
<dd>
<a href="#">太阳镜</a> <a href="#">光学镜架/镜片</a> <a href="#">防辐射眼镜</a> <a href="#">女士丝巾/围巾/披肩</a>
<a href="#">棒球帽</a> <a href="#">遮阳伞/雨伞</a> <a href="#">遮阳帽</a> <a href="#">领带/领结/领带夹</a>
<a href="#">男士腰带/礼盒</a> <a href="#">防晒手套</a> <a href="#">老花镜</a> <a href="#">袖扣</a>
<a href="#">男士丝巾/围巾</a> <a href="#">装饰眼镜</a> <a href="#">女士腰带/礼盒</a> <a href="#">游泳镜</a>
</dd>
</dl>
<dl>
<dt><a href="#">珠宝首饰</a></dt>
<dd>
<a href="#">时尚饰品</a> <a href="#">钻石</a> <a href="#">翡翠玉石</a> <a href="#">纯金K金饰品</a>
<a href="#">金银投资</a> <a href="#">银饰</a> <a href="#">水晶玛瑙</a> <a href="#">彩宝</a>
<a href="#">铂金</a> <a href="#">天然木饰</a> <a href="#">珍珠</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">个护化妆</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">面部护肤</a></dt>
<dd>
<a href="#">清洁</a> <a href="#">护肤</a> <a href="#">面膜</a> <a href="#">剃须</a> <a href="#">
套装</a>
</dd>
</dl>
<!-- <dl>
<dt><a href="#">洗发护发</a></dt>
<dd>
<a href="#">洗发</a> <a href="#">护发</a> <a href="#">染发</a> <a href="#">造型</a> <a href="#">
假发</a> <a href="#">套装</a>
</dd>
</dl>
<dl>
<dt><a href="#">身体护肤</a></dt>
<dd>
<a href="#">沐浴</a> <a href="#">润肤</a> <a href="#">颈部</a> <a href="#">手足</a> <a href="#">
纤体塑形</a> <a href="#">美胸</a> <a href="#">套装</a>
</dd>
</dl>
<dl>
<dt><a href="#">口腔护理</a></dt>
<dd>
<a href="#">牙膏/牙粉</a> <a href="#">牙刷/牙线</a> <a href="#">漱口水</a> <a href="#">套装</a>
</dd>
</dl>
<dl>
<dt><a href="#">女性护理</a></dt>
<dd>
<a href="#">卫生巾</a> <a href="#">卫生护垫</a> <a href="#">私密护理</a> <a href="#">脱毛膏</a>
</dd>
</dl>
<dl>
<dt><a href="#">香水彩妆</a></dt>
<dd>
<a href="#">香水</a> <a href="#">底妆</a> <a href="#">腮红</a> <a href="#">眼部</a> <a href="#">
唇部</a> <a href="#">美甲</a> <a href="#">美容工具</a> <a href="#">套装</a>
</dd>
</dl>-->
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">鞋靴、箱包、钟表、奢侈品</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">时尚女鞋</a></dt>
<dd>
<a href="#">凉鞋</a> <a href="#">单鞋</a> <a href="#">高跟鞋</a> <a href="#">坡跟鞋</a> <a
href="#">松糕鞋</a> <a href="#">鱼嘴鞋</a> <a href="#">休闲鞋</a> <a href="#">帆布鞋</a>
<a href="#">拖鞋/人字拖</a> <a href="#">妈妈鞋</a> <a href="#">防水台</a> <a href="#">雨鞋/雨靴</a>
<a href="#">内增高</a> <a href="#">布鞋/绣花鞋</a> <a href="#">女靴</a> <a href="#">雪地靴</a>
<a href="#">踝靴</a> <a href="#">马丁靴</a> <a href="#">鞋配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">流行男鞋</a></dt>
<dd>
<a href="#">休闲鞋</a> <a href="#">凉鞋/沙滩鞋</a> <a href="#">帆布鞋</a> <a href="#">商务休闲鞋</a>
<a href="#">正装鞋</a> <a href="#">增高鞋</a> <a href="#">拖鞋/人字拖</a> <a href="#">工装鞋</a>
<a href="#">男靴</a> <a href="#">传统布鞋</a> <a href="#">功能鞋</a> <a href="#">鞋配件</a>
<a href="#">定制鞋</a>
</dd>
</dl>
<dl>
<dt><a href="#">潮流女包</a></dt>
<dd>
<a href="#">单肩包</a> <a href="#">手提包</a> <a href="#">斜挎包</a> <a href="#">双肩包</a>
<a href="#">钱包</a> <a href="#">手拿包/晚宴包</a> <a href="#">卡包/零钱包</a> <a href="#">钥匙包</a>
</dd>
</dl>
<dl>
<dt><a href="#">精品男包</a></dt>
<dd>
<a href="#">商务公文包</a> <a href="#">单肩/斜挎包</a> <a href="#">男士手包</a> <a href="#">双肩包</a>
<a href="#">钱包/卡包</a> <a href="#">钥匙包</a>
</dd>
</dl>
<dl>
<dt><a href="#">功能箱包</a></dt>
<dd>
<a href="#">拉杆箱/拉杆包</a> <a href="#">旅行包</a> <a href="#">电脑包</a> <a href="#">休闲运动包</a>
<a href="#">相机包</a> <a href="#">腰包/胸包</a> <a href="#">登山包</a> <a href="#">旅行配件</a>
<a href="#">书包</a> <a href="#">妈咪包</a>
</dd>
</dl>
<dl>
<dt><a href="#">奢侈品</a></dt>
<dd>
<a href="#">箱包</a> <a href="#">钱包</a> <a href="#">服饰</a> <a href="#">腰带</a> <a href="#">
鞋靴</a> <a href="#">太阳镜/眼镜框</a> <a href="#">饰品</a> <a href="#">配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">钟表</a></dt>
<dd>
<a href="#">男表</a> <a href="#">女表</a> <a href="#">儿童表</a> <a href="#">座钟挂钟</a>
</dd>
</dl>
<dl>
<dt><a href="#">礼品</a></dt>
<dd>
<a href="#">火机烟具</a> <a href="#">军刀军具</a> <a href="#">美妆礼品</a> <a href="#">工艺礼品</a>
<a href="#">礼盒礼券</a> <a href="#">礼品文具</a> <a href="#">收藏品</a> <a href="#">古董把玩</a>
<a href="#">地方礼品</a> <a href="#">创意礼品</a> <a href="#">婚庆用品</a> <a href="#">鲜花绿植</a>
<a href="#">京东卡</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">运动户外</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">运动鞋包</a></dt>
<dd>
<a href="#">休闲鞋</a> <a href="#">跑步鞋</a> <a href="#">板鞋</a> <a href="#">帆布鞋</a> <a
href="#">篮球鞋</a> <a href="#">足球鞋</a> <a href="#">乒羽网鞋</a> <a href="#">专项运动鞋</a>
<a href="#">训练鞋</a> <a href="#">拖鞋</a> <a href="#">运动包</a>
</dd>
</dl>
<dl>
<dt><a href="#">运动服饰</a></dt>
<dd>
<a href="#">卫衣/套头衫</a> <a href="#">毛衫/线衫</a> <a href="#">夹克/风衣</a> <a href="#">棉服</a>
<a href="#">羽绒服</a> <a href="#">T恤</a> <a href="#">乒羽网服</a> <a href="#">训练服</a>
<a href="#">运动背心</a> <a href="#">运动裤</a> <a href="#">运动套装</a> <a href="#">运动配饰</a>
</dd>
</dl>
<dl>
<dt><a href="#">健身训练</a></dt>
<dd>
<a href="#">跑步机</a> <a href="#">健身车/动感单车</a> <a href="#">综合训练器</a> <a href="#">其他大型器械</a>
<a href="#">哑铃</a> <a href="#">仰卧板/收腹机</a> <a href="#">其他中小型器材</a> <a href="#">武术搏击</a>
<a href="#">运动护具</a> <a href="#">瑜伽舞蹈</a>
</dd>
</dl>
<dl>
<dt><a href="#">骑行运动</a></dt>
<dd>
<a href="#">山地车/公路车</a> <a href="#">折叠车</a> <a href="#">电动车</a> <a href="#">其他整车</a>
<a href="#">骑行装备</a> <a href="#">骑行服</a>
</dd>
</dl>
<dl>
<dt><a href="#">体育用品</a></dt>
<dd>
<a href="#">乒乓球</a> <a href="#">羽毛球</a> <a href="#">网球</a> <a href="#">篮球</a> <a
href="#">足球</a> <a href="#">高尔夫</a> <a href="#">台球</a> <a href="#">轮滑滑板</a>
<a href="#">排球</a> <a href="#">棋牌麻将</a> <a href="#">其它</a>
</dd>
</dl>
<dl>
<dt><a href="#">户外鞋服</a></dt>
<dd>
<a href="#">冲锋衣裤</a> <a href="#">速干衣裤</a> <a href="#">滑雪服</a> <a href="#">羽绒服/棉服</a>
<a href="#">休闲衣裤</a> <a href="#">抓绒衣裤</a> <a href="#">软壳衣裤</a> <a href="#">T恤</a>
<a href="#">户外风衣</a> <a href="#">功能内衣</a> <a href="#">军迷服饰</a> <a href="#">登山鞋</a>
<a href="#">徒步鞋</a> <a href="#">越野跑鞋</a> <a href="#">休闲鞋</a> <a href="#">雪地靴</a>
<a href="#">工装鞋</a> <a href="#">溯溪鞋</a> <a href="#">沙滩/凉拖</a> <a href="#">户外袜</a>
</dd>
</dl>
<dl>
<dt><a href="#">户外装备</a></dt>
<dd>
<a href="#">背包</a> <a href="#">帐篷/垫子</a> <a href="#">睡袋/吊床</a> <a href="#">登山攀岩</a>
<a href="#">户外照明</a> <a href="#">野餐烧烤</a> <a href="#">便携桌椅床</a> <a href="#">户外工具</a>
<a href="#">望远镜</a> <a href="#">户外仪表</a> <a href="#">旅游用品</a> <a href="#">军迷用品</a>
<a href="#">救援装备</a> <a href="#">滑雪装备</a> <a href="#">极限户外</a> <a href="#">冲浪潜水</a>
<a href="#">户外配饰</a>
</dd>
</dl>
<dl>
<dt><a href="#">垂钓用品</a></dt>
<dd>
<a href="#">鱼竿鱼线</a> <a href="#">浮漂鱼饵</a> <a href="#">钓鱼桌椅</a> <a href="#">钓鱼配件</a>
<a href="#">钓箱鱼包</a> <a href="#">其它</a>
</dd>
</dl>
<dl>
<dt><a href="#">游泳用品</a></dt>
<dd>
<a href="#">泳镜</a> <a href="#">泳帽</a> <a href="#">游泳包防水包</a> <a href="#">男士泳衣</a>
<a href="#">女士泳衣</a> <a href="#">比基尼</a> <a href="#">其它</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">汽车用品</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">维修保养</a></dt>
<dd>
<a href="#">润滑油</a> <a href="#">添加剂</a> <a href="#">防冻液</a> <a href="#">滤清器</a>
<a href="#">火花塞</a> <a href="#">雨刷</a> <a href="#">车灯</a> <a href="#">后视镜</a> <a
href="#">轮胎</a> <a href="#">轮毂</a> <a href="#">刹车片/盘</a> <a href="#">喇叭/皮带</a>
<a href="#">蓄电池</a> <a href="#">底盘装甲/护板</a> <a href="#">贴膜</a> <a href="#">汽修工具</a>
</dd>
</dl>
<dl>
<dt><a href="#">车载电器</a></dt>
<dd>
<a href="#">导航仪</a> <a href="#">安全预警仪</a> <a href="#">行车记录仪</a> <a href="#">倒车雷达</a>
<a href="#">蓝牙设备</a> <a href="#">时尚影音</a> <a href="#">净化器</a> <a href="#">电源</a>
<a href="#">冰箱</a> <a href="#">吸尘器</a>
</dd>
</dl>
<dl>
<dt><a href="#">美容清洗</a></dt>
<dd>
<a href="#">车蜡</a> <a href="#">补漆笔</a> <a href="#">玻璃水</a> <a href="#">清洁剂</a> <a
href="#">洗车工具</a> <a href="#">洗车配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">汽车装饰</a></dt>
<dd>
<a href="#">脚垫</a> <a href="#">座垫</a> <a href="#">座套</a> <a href="#">后备箱垫</a> <a
href="#">头枕腰靠</a> <a href="#">香水</a> <a href="#">空气净化</a> <a href="#">车内饰品</a>
<a href="#">功能小件</a> <a href="#">车身装饰件</a> <a href="#">车衣</a>
</dd>
</dl>
<dl>
<dt><a href="#">安全自驾</a></dt>
<dd>
<a href="#">安全座椅</a> <a href="#">胎压充气</a> <a href="#">防盗设备</a> <a href="#">应急救援</a>
<a href="#">保温箱</a> <a href="#">储物箱</a> <a href="#">自驾野营</a> <a href="#">摩托车装备</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">母婴、玩具乐器</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">奶粉</a></dt>
<dd>
<a href="#">婴幼奶粉</a> <a href="#">成人奶粉</a>
</dd>
</dl>
<dl>
<dt><a href="#">营养辅食</a></dt>
<dd>
<a href="#">DHA</a> <a href="#">钙铁锌/维生素</a> <a href="#">益生菌/初乳</a> <a href="#">清火/开胃</a>
<a href="#">米粉/菜粉</a> <a href="#">果泥/果汁</a> <a href="#">面条/粥</a> <a href="#">宝宝零食</a>
</dd>
</dl>
<dl>
<dt><a href="#">尿裤湿巾</a></dt>
<dd>
<a href="#">婴儿尿裤</a> <a href="#">拉拉裤</a> <a href="#">成人尿裤</a> <a href="#">湿巾</a>
</dd>
</dl>
<dl>
<dt><a href="#">洗护用品</a></dt>
<dd>
<a href="#">宝宝护肤</a> <a href="#">宝宝洗浴</a> <a href="#">理发器</a> <a href="#">洗衣液/皂</a>
<a href="#">奶瓶清洗</a> <a href="#">日常护理</a> <a href="#">座便器</a> <a href="#">驱蚊防蚊</a>
</dd>
</dl>
<dl>
<dt><a href="#">喂养用品</a></dt>
<dd>
<a href="#">奶瓶奶嘴</a> <a href="#">吸奶器</a> <a href="#">牙胶安抚</a> <a href="#">暖奶消毒</a>
<a href="#">辅食料理机</a> <a href="#">碗盘叉勺</a> <a href="#">水壶/水杯</a>
</dd>
</dl>
<dl>
<dt><a href="#">童车童床</a></dt>
<dd>
<a href="#">婴儿床</a> <a href="#">婴儿推车</a> <a href="#">餐椅摇椅</a> <a href="#">学步车</a>
<a href="#">三轮车</a> <a href="#">自行车</a> <a href="#">扭扭车</a> <a href="#">滑板车</a>
<a href="#">电动车</a>
</dd>
</dl>
<dl>
<dt><a href="#">安全座椅</a></dt>
<dd>
<a href="#">提篮式</a> <a href="#">安全座椅</a> <a href="#">增高垫</a>
</dd>
</dl>
<dl>
<dt><a href="#">寝居服饰</a></dt>
<dd>
<a href="#">婴儿外出服</a> <a href="#">婴儿内衣</a> <a href="#">婴儿礼盒</a> <a href="#">婴儿鞋帽袜</a>
<a href="#">家居床品</a> <a href="#">安全防护</a>
</dd>
</dl>
<dl>
<dt><a href="#">妈妈专区</a></dt>
<dd>
<a href="#">妈咪包/背婴带</a> <a href="#">待产/新生</a> <a href="#">产后塑身</a> <a href="#">文胸/内裤</a>
<a href="#">防辐射服</a> <a href="#">孕妇装</a> <a href="#">月子装</a> <a href="#">孕期营养</a>
<a href="#">孕妈美容</a>
</dd>
</dl>
<dl class="0">
<dt><a href="#">童装童鞋</a></dt>
<dd>
<a href="#">套装</a> <a href="#">上衣</a> <a href="#">裤子</a> <a href="#">裙子</a> <a href="#">
内衣</a> <a href="#">羽绒服/棉服</a> <a href="#">亲子装</a> <a href="#">配饰</a> <a href="#">演出服</a>
<a href="#">运动服</a> <a href="#">运动鞋</a> <a href="#">皮鞋/帆布鞋</a> <a href="#">靴子</a>
<a href="#">凉鞋</a> <a href="#">功能鞋</a>
</dd>
</dl>
<dl class="1">
<dt><a href="#">玩具乐器</a></dt>
<dd>
<a href="#">适用年龄</a> <a href="#">遥控/电动</a> <a href="#">毛绒布艺</a> <a href="#">娃娃玩具</a>
<a href="#">模型玩具</a> <a href="#">健身玩具</a> <a href="#">动漫玩具</a> <a href="#">益智玩具</a>
<a href="#">积木拼插</a> <a href="#">DIY玩具</a> <a href="#">创意减压</a> <a href="#">乐器相关</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">食品饮料、酒类、生鲜</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">中外名酒</a></dt>
<dd>
<a href="#">白酒</a> <a href="#">葡萄酒</a> <a href="#">洋酒</a> <a href="#">啤酒</a> <a href="#">
黄酒/养生酒</a> <a href="#">收藏酒/陈年老酒</a>
</dd>
</dl>
<dl>
<dt><a href="#">进口食品</a></dt>
<dd>
<a href="#">牛奶</a> <a href="#">饼干蛋糕</a> <a href="#">糖果/巧克力</a> <a href="#">休闲零食</a>
<a href="#">冲调饮品</a> <a href="#">粮油调味</a>
</dd>
</dl>
<dl>
<dt><a href="#">休闲食品</a></dt>
<dd>
<a href="#">休闲零食</a> <a href="#">坚果炒货</a> <a href="#">肉干肉脯</a> <a href="#">蜜饯果干</a>
<a href="#">糖果/巧克力</a> <a href="#">饼干蛋糕</a> <a href="#">无糖食品</a>
</dd>
</dl>
<dl>
<dt><a href="#">地方特产</a></dt>
<dd>
<a href="#">*</a> <a href="#">四川</a> <a href="#">云南</a> <a href="#">湖南</a> <a href="#">
内蒙</a> <a href="#">北京</a> <a href="#">山西</a> <a href="#">福建</a> <a href="#">东北</a>
<a href="#">其他</a>
</dd>
</dl>
<dl>
<dt><a href="#">茗茶</a></dt>
<dd>
<a href="#">铁观音</a> <a href="#">普洱</a> <a href="#">龙井</a> <a href="#">绿茶</a> <a href="#">
红茶</a> <a href="#">乌龙茶</a> <a href="#">花草茶</a> <a href="#">花果茶</a> <a href="#">黑茶</a>
<a href="#">白茶</a> <a href="#">养生茶</a> <a href="#">其他茶</a>
</dd>
</dl>
<dl>
<dt><a href="#">饮料冲调</a></dt>
<dd>
<a href="#">牛奶乳品</a> <a href="#">饮料</a> <a href="#">饮用水</a> <a href="#">咖啡/奶茶</a>
<a href="#">蜂蜜/柚子茶</a> <a href="#">冲饮谷物</a> <a href="#">成人奶粉</a>
</dd>
</dl>
<dl>
<dt><a href="#">粮油调味</a></dt>
<dd>
<a href="#">米面杂粮</a> <a href="#">食用油</a> <a href="#">调味品</a> <a href="#">南北干货</a>
<a href="#">方便食品</a> <a href="#">有机食品</a>
</dd>
</dl>
<dl>
<dt><a href="#">生鲜食品</a></dt>
<dd>
<a href="#">水果蔬菜</a> <a href="#">海鲜水产</a> <a href="#">海参</a> <a href="#">牛排</a>
<a href="#">肉禽蛋奶</a> <a href="#">熟食腊味</a> <a href="#">环球美食</a> <a href="#">产地直供</a>
</dd>
</dl>
<dl>
<dt><a href="#">食品礼券</a></dt>
<dd>
<a href="#">大闸蟹</a> <a href="#">粽子</a> <a href="#">月饼</a> <a href="#">卡券</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
<li><a href="#">营养保健</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">营养健康</a></dt>
<dd>
<a href="#">调节免疫</a> <a href="#">调节三高</a> <a href="#">缓解疲劳</a> <a href="#">美体塑身</a>
<a href="#">美容养颜</a> <a href="#">肝肾养护</a> <a href="#">肠胃养护</a> <a href="#">明目益智</a>
<a href="#">骨骼健康</a> <a href="#">改善睡眠</a> <a href="#">抗氧化</a> <a href="#">耐缺氧</a>
</dd>
</dl>
<dl>
<dt><a href="#">营养成分</a></dt>
<dd>
<a href="#">维生素/矿物质</a> <a href="#">蛋白质</a> <a href="#">鱼油/磷脂</a> <a href="#">螺旋藻</a>
<a href="#">番茄红素</a> <a href="#">叶酸</a> <a href="#">葡萄籽</a> <a href="#">左旋肉碱</a>
<a href="#">辅酶Q10</a> <a href="#">益生菌</a> <a href="#">玛咖</a> <a href="#">膳食纤维</a>
<a href="#">牛初乳</a> <a href="#">胶原蛋白</a> <a href="#">大豆异黄酮</a> <a href="#">芦荟提取</a>
<a href="#">酵素</a>
</dd>
</dl>
<dl>
<dt><a href="#">传统滋补</a></dt>
<dd>
<a href="#">蜂产品</a> <a href="#">阿胶</a> <a href="#">参类</a> <a href="#">冬虫夏草</a> <a
href="#">燕窝</a> <a href="#">海参</a> <a href="#">养生茶饮</a> <a href="#">鹿茸</a> <a href="#">
灵芝</a> <a href="#">药食同源</a>
</dd>
</dl>
<dl>
<dt><a href="#">成人用品</a></dt>
<dd>
<a href="#">安全避孕</a> <a href="#">验孕测孕</a> <a href="#">人体润滑</a> <a href="#">情爱玩具</a>
<a href="#">情趣内衣</a>
</dd>
</dl>
<dl>
<dt><a href="#">保健器械</a></dt>
<dd>
<a href="#">血压仪器</a> <a href="#">血糖用品</a> <a href="#">养生器械</a> <a href="#">康复辅助</a>
<a href="#">中医保健</a> <a href="#">家庭护理</a> <a href="#">呼吸制氧</a>
</dd>
</dl>
<dl>
<dt><a href="#">急救卫生</a></dt>
<dd>
<a href="#">口罩</a> <a href="#">跌打损伤</a> <a href="#">防裂抗冻</a> <a href="#">眼部保健</a>
<a href="#">鼻炎健康</a>
</dd>
</dl>
</div>
<div class="rightdiv">
</div>
</div>
</li>
</ul>
</body>
</html>

二、JavaScript语言--JS实践--商城分类导航效果的更多相关文章

  1. CSS实现商城分类导航效果(hover选择器)

    学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...

  2. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  3. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  4. 商城分类导航实现 (css&rpar;

    代码实例:demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  6. 二、JavaScript语言--JS基础--JavaScript入门篇

    1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--浏览器对象

    1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:

  8. 二、JavaScript语言--JS动画--JS动画效果

    运动框架实现思路: 1.速度(改变值:left , right , width , height , opacity) 2.缓冲运动 3.多物体运动 4.任意值改变 5.链式运动 6.同时运动 js用 ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

随机推荐

  1. unsilder中的jq深入学习

    //trigger $('#foo').on('click', function() { alert($(this).text()); }); $('#foo').trigger('click'); ...

  2. 获取 view所在的VC

    - (UIViewController*)viewController { for (UIView* next = [self superview]; next; next = next.superv ...

  3. &lbrack;转&rsqb; MySQL 查询表数据大小的总结

    一:关于mysql表数据大小 我们知道mysql存储数据文件一般使用表空间存储 当mysql使用innodb存储引擎的时候,mysql使用表存储数据分为共享表空间和独享表空间两种方式 ·共享表空间:I ...

  4. 菜鸟学SSH(十五)——简单模拟Hibernate实现原理

    之前写了Spring的实现原理,今天我们接着聊聊Hibernate的实现原理,这篇文章只是简单的模拟一下Hibernate的原理,主要是模拟了一下Hibernate的Session类.好了,废话不多说 ...

  5. C&num;转义字符总结

    转义字符 \·一种特殊的字符常量:·以反斜线"\"开头,后跟一个或几个字符.·具有特定的含义,不同于字符原有的意义,故称“转义”字符.·主要用来表示那些用一般字符不便于表示的控制代 ...

  6. 项目经验谈---IM新消息界面刷新异常处理记录

    项目中使用到ContentObserver来观察Provider的变化,当对Uri做数据库操作时对应的Provider会发一条Notify消息调用UI上层的ContentChange方法,在这个Con ...

  7. javascript弹出框打印某个数值时,弹出NaN?(not a number)

    一.NaN:表示not a number null 未定义或空字符串 undefined 对象属性不存在 或是声明了变量但从未赋值. 二.出现这种情况有(1)此常数的值是零被零除所得到的结果. (2) ...

  8. 大数据笔记13:Hadoop安装之Hadoop的配置安装

    1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip ...

  9. sed命令详解 vim高级技巧 shell编程上

    第1章 sed命令详解 1.1 查找固定的某一行 1.1.1 awk命令方法 [root@znix ~]# awk '!/oldboy/' person.txt 102,zhangyao,CTO 10 ...

  10. npm5 packag-lock&period;json

    前几天升级了 Node.js v8.0 后,自带的 npm 也升级到了5.0,第一次使用的时候确实惊艳到了:原本重新安装一次模块要十几秒到事情,现在一秒多就搞定了.先不要激动,现在我来大概讲一下 np ...