以下是 京东新版侧栏jquery导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东新版侧栏jquery导航</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="top"></div>
<!--导航 Start-->
<div class="menu">
<div class="all-sort"><h2><a href="">全部商品分类</a></h2></div>
<div class="ad">
<a href="">
<img src="images/rBEhVlJEA84IAAAAAAAZY9Mm2-UAADmFQNaVy4AABl7123.jpg" width="141" height="40" />
</a>
</div>
<div class="nav">
<ul class="clearfix">
<li><a href="#" class="current">首页</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>
</div>
</div>
<!--导航 End-->
<!--所有分类 Start-->
<div class="wrap">
<div class="all-sort-list">
<div class="item bo">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书0</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="#">经济</a></em><em><a href="#">金融与投资</a></em><em><a href="#">管理</a></em><em><a href="#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="#">家庭与育儿</a></em><em><a href="#">旅游/地图</a></em><em><a href="#">烹饪/美食</a></em><em><a href="#">时尚/美妆</a></em><em><a href="#">家居</a></em><em><a href="#">婚恋与两性</a></em><em><a href="#">娱乐/休闲</a></em><em><a href="#">健身与保健</a></em><em><a href="#">动漫/幽默</a></em><em><a href="#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="#">科普</a></em><em><a href="#">IT</a></em><em><a href="#">建筑</a></em><em><a href="#">医学</a></em><em><a href="#">工业技术</a></em><em><a href="#">电子/通信</a></em><em><a href="#">农林</a></em><em><a href="#">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="#">少儿</a></em><em><a href="#">0-2岁</a></em><em><a href="#">3-6岁</a></em><em><a href="#">7-10岁</a></em><em><a href="#">11-14岁</a></em></dd>
</dl>
<dl class="fore10">
<dt>教育</dt>
<dd><em><a href="#">教材教辅</a></em><em><a href="#">考试</a></em><em><a href="#">外语学习</a></em></dd>
</dl>
<dl class="fore11">
<dt>其它</dt>
<dd><em><a href="#">英文原版书</a></em><em><a href="#">港台图书</a></em><em><a href="#">工具书</a></em><em><a href="#">套装书</a></em><em><a href="#">杂志/期刊</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="#" target="_blank"><img src="images/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="#" target="_blank"><img src="images/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
<li><a href="#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="#" target="_blank">电子工业出版社</a></li>
<li><a href="#" target="_blank">三联书店</a></li>
<li><a href="#" target="_blank">浙江少年儿童出版社</a></li>
<li><a href="#" target="_blank">人民文学出版社</a></li>
<li><a href="#" target="_blank">外语教学与研究出版社</a></li>
<li><a href="#" target="_blank">中信出版社</a></li>
<li><a href="#" target="_blank">化学工业出版社</a></li>
<li><a href="#" target="_blank">北京大学出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书1</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="#">经济</a></em><em><a href="#">金融与投资</a></em><em><a href="#">管理</a></em><em><a href="#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="#">家庭与育儿</a></em><em><a href="#">旅游/地图</a></em><em><a href="#">烹饪/美食</a></em><em><a href="#">时尚/美妆</a></em><em><a href="#">家居</a></em><em><a href="#">婚恋与两性</a></em><em><a href="#">娱乐/休闲</a></em><em><a href="#">健身与保健</a></em><em><a href="#">动漫/幽默</a></em><em><a href="#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="#">科普</a></em><em><a href="#">IT</a></em><em><a href="#">建筑</a></em><em><a href="#">医学</a></em><em><a href="#">工业技术</a></em><em><a href="#">电子/通信</a></em><em><a href="#">农林</a></em><em><a href="#">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="#">少儿</a></em><em><a href="#">0-2岁</a></em><em><a href="#">3-6岁</a></em><em><a href="#">7-10岁</a></em><em><a href="#">11-14岁</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="#" target="_blank"><img src="images/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="#" target="_blank"><img src="images/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
<li><a href="#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="#" target="_blank">电子工业出版社</a></li>
<li><a href="#" target="_blank">三联书店</a></li>
<li><a href="#" target="_blank">浙江少年儿童出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书2</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
<li><a href="#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="#" target="_blank">电子工业出版社</a></li>
<li><a href="#" target="_blank">三联书店</a></li>
<li><a href="#" target="_blank">浙江少年儿童出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书3</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="#">经济</a></em><em><a href="#">金融与投资</a></em><em><a href="#">管理</a></em><em><a href="#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="#">家庭与育儿</a></em><em><a href="#">旅游/地图</a></em><em><a href="#">烹饪/美食</a></em><em><a href="#">时尚/美妆</a></em><em><a href="#">家居</a></em><em><a href="#">婚恋与两性</a></em><em><a href="#">娱乐/休闲</a></em><em><a href="#">健身与保健</a></em><em><a href="#">动漫/幽默</a></em><em><a href="#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="#">科普</a></em><em><a href="#">IT</a></em><em><a href="#">建筑</a></em><em><a href="#">医学</a></em><em><a href="#">工业技术</a></em><em><a href="#">电子/通信</a></em><em><a href="#">农林</a></em><em><a href="#">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="#">少儿</a></em><em><a href="#">0-2岁</a></em><em><a href="#">3-6岁</a></em><em><a href="#">7-10岁</a></em><em><a href="#">11-14岁</a></em></dd>
</dl>
<dl class="fore10">
<dt>教育</dt>
<dd><em><a href="#">教材教辅</a></em><em><a href="#">考试</a></em><em><a href="#">外语学习</a></em></dd>
</dl>
<dl class="fore11">
<dt>其它</dt>
<dd><em><a href="#">英文原版书</a></em><em><a href="#">港台图书</a></em><em><a href="#">工具书</a></em><em><a href="#">套装书</a></em><em><a href="#">杂志/期刊</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="#" target="_blank"><img src="images/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="#" target="_blank"><img src="images/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
<li><a href="#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="#" target="_blank">电子工业出版社</a></li>
<li><a href="#" target="_blank">三联书店</a></li>
<li><a href="#" target="_blank">浙江少年儿童出版社</a></li>
<li><a href="#" target="_blank">人民文学出版社</a></li>
<li><a href="#" target="_blank">外语教学与研究出版社</a></li>
<li><a href="#" target="_blank">中信出版社</a></li>
<li><a href="#" target="_blank">化学工业出版社</a></li>
<li><a href="#" target="_blank">北京大学出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书4</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="#">经济</a></em><em><a href="#">金融与投资</a></em><em><a href="#">管理</a></em><em><a href="#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="#">家庭与育儿</a></em><em><a href="#">旅游/地图</a></em><em><a href="#">烹饪/美食</a></em><em><a href="#">时尚/美妆</a></em><em><a href="#">家居</a></em><em><a href="#">婚恋与两性</a></em><em><a href="#">娱乐/休闲</a></em><em><a href="#">健身与保健</a></em><em><a href="#">动漫/幽默</a></em><em><a href="#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="#">科普</a></em><em><a href="#">IT</a></em><em><a href="#">建筑</a></em><em><a href="#">医学</a></em><em><a href="#">工业技术</a></em><em><a href="#">电子/通信</a></em><em><a href="#">农林</a></em><em><a href="#">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="#">少儿</a></em><em><a href="#">0-2岁</a></em><em><a href="#">3-6岁</a></em><em><a href="#">7-10岁</a></em><em><a href="#">11-14岁</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="#" target="_blank"><img src="images/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="#" target="_blank"><img src="images/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
<li><a href="#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="#" target="_blank">电子工业出版社</a></li>
<li><a href="#" target="_blank">三联书店</a></li>
<li><a href="#" target="_blank">浙江少年儿童出版社</a></li>
<li><a href="#" target="_blank">人民文学出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书5</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="#">经济</a></em><em><a href="#">金融与投资</a></em><em><a href="#">管理</a></em><em><a href="#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="#">家庭与育儿</a></em><em><a href="#">旅游/地图</a></em><em><a href="#">烹饪/美食</a></em><em><a href="#">时尚/美妆</a></em><em><a href="#">家居</a></em><em><a href="#">婚恋与两性</a></em><em><a href="#">娱乐/休闲</a></em><em><a href="#">健身与保健</a></em><em><a href="#">动漫/幽默</a></em><em><a href="#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="#">科普</a></em><em><a href="#">IT</a></em><em><a href="#">建筑</a></em><em><a href="#">医学</a></em><em><a href="#">工业技术</a></em><em><a href="#">电子/通信</a></em><em><a href="#">农林</a></em><em><a href="#">科学与自然</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="#" target="_blank"><img src="images/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="#" target="_blank"><img src="images/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
<li><a href="#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="#" target="_blank">电子工业出版社</a></li>
<li><a href="#" target="_blank">三联书店</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书6</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="#">经济</a></em><em><a href="#">金融与投资</a></em><em><a href="#">管理</a></em><em><a href="#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="#">家庭与育儿</a></em><em><a href="#">旅游/地图</a></em><em><a href="#">烹饪/美食</a></em><em><a href="#">时尚/美妆</a></em><em><a href="#">家居</a></em><em><a href="#">婚恋与两性</a></em><em><a href="#">娱乐/休闲</a></em><em><a href="#">健身与保健</a></em><em><a href="#">动漫/幽默</a></em><em><a href="#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="#">科普</a></em><em><a href="#">IT</a></em><em><a href="#">建筑</a></em><em><a href="#">医学</a></em><em><a href="#">工业技术</a></em><em><a href="#">电子/通信</a></em><em><a href="#">农林</a></em><em><a href="#">科学与自然</a></em></dd>
</dl>
<dl class="fore9">
<dt>少儿</dt>
<dd><em><a href="#">少儿</a></em><em><a href="#">0-2岁</a></em><em><a href="#">3-6岁</a></em><em><a href="#">7-10岁</a></em><em><a href="#">11-14岁</a></em></dd>
</dl>
<dl class="fore10">
<dt>教育</dt>
<dd><em><a href="#">教材教辅</a></em><em><a href="#">考试</a></em><em><a href="#">外语学习</a></em></dd>
</dl>
<dl class="fore11">
<dt>其它</dt>
<dd><em><a href="#">英文原版书</a></em><em><a href="#">港台图书</a></em><em><a href="#">工具书</a></em><em><a href="#">套装书</a></em><em><a href="#">杂志/期刊</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="#" target="_blank"><img src="images/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="#" target="_blank"><img src="images/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
<li><a href="#" target="_blank">上海世纪出版股份有限公司</a></li>
<li><a href="#" target="_blank">电子工业出版社</a></li>
<li><a href="#" target="_blank">三联书店</a></li>
<li><a href="#" target="_blank">浙江少年儿童出版社</a></li>
<li><a href="#" target="_blank">人民文学出版社</a></li>
<li><a href="#" target="_blank">外语教学与研究出版社</a></li>
<li><a href="#" target="_blank">中信出版社</a></li>
<li><a href="#" target="_blank">化学工业出版社</a></li>
<li><a href="#" target="_blank">北京大学出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书7</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="#" target="_blank"><img src="images/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3><span>·</span><a href="">图书</a>、<a href="">音像</a>、<a href="">数字商品</a></h3>
<div class="item-list clearfix">
<div class="close">x</div>
<div class="subitem">
<dl class="fore1">
<dt><a href="#">电子书8</a></dt>
<dd><em><a href="#">免费</a></em><em><a href="#">小说</a></em><em><a href="#">励志与成功</a></em><em><a href="#">婚恋/两性</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em></dd>
</dl>
<dl class="fore2">
<dt><a href="#">数字音乐</a></dt>
<dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
</dl>
<dl class="fore3">
<dt><a href="#">音像</a></dt>
<dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
</dl>
<dl class="fore4">
<dt>文艺</dt>
<dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
</dl>
<dl class="fore5">
<dt>人文社科</dt>
<dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
</dl>
<dl class="fore6">
<dt>经管励志</dt>
<dd><em><a href="#">经济</a></em><em><a href="#">金融与投资</a></em><em><a href="#">管理</a></em><em><a href="#">励志与成功</a></em></dd>
</dl>
<dl class="fore7">
<dt>生活</dt>
<dd><em><a href="#">家庭与育儿</a></em><em><a href="#">旅游/地图</a></em><em><a href="#">烹饪/美食</a></em><em><a href="#">时尚/美妆</a></em><em><a href="#">家居</a></em><em><a href="#">婚恋与两性</a></em><em><a href="#">娱乐/休闲</a></em><em><a href="#">健身与保健</a></em><em><a href="#">动漫/幽默</a></em><em><a href="#">体育/运动</a></em></dd>
</dl>
<dl class="fore8">
<dt>科技</dt>
<dd><em><a href="#">科普</a></em><em><a href="#">IT</a></em><em><a href="#">建筑</a></em><em><a href="#">医学</a></em><em><a href="#">工业技术</a></em><em><a href="#">电子/通信</a></em><em><a href="#">农林</a></em><em><a href="#">科学与自然</a></em></dd>
</dl>
</div>
<div class="cat-right">
<dl class="categorys-promotions" clstag="homepage|keycount|home2013|0601c">
<dd>
<ul>
<li><a href="#" target="_blank"><img src="images/rBEhWFJTydgIAAAAAAAiD8_1J3AAAD5mAMC0SYAACIn230.jpg" width="194" height="70" title="特价书满减"></a></li>
<li><a href="#" target="_blank"><img src="images/rBEhVlJTyt8IAAAAAAAiq1D-0D8AAD7_gIE2KUAACLD102.jpg" width="194" height="70" title="重磅独家"></a></li>
</ul>
</dd>
</dl>
<dl class="categorys-brands" clstag="homepage|keycount|home2013|0601d">
<dt>推荐品牌出版商</dt>
<dd>
<ul>
<li><a href="#" target="_blank">中华书局</a></li>
<li><a href="#" target="_blank">人民邮电出版社</a></li>
<li><a href="#" target="_blank">上海世纪出版股份有限公司</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!--所有分类 End-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$('.all-sort-list > .item').hover(function(){
var eq = $('.all-sort-list > .item').index(this), //获取当前滑过是第几个元素
h = $('.all-sort-list').offset().top, //获取当前下拉菜单距离窗口多少像素
s = $(window).scrollTop(), //获取游览器滚动了多少高度
i = $(this).offset().top, //当前元素滑过距离窗口多少像素
item = $(this).children('.item-list').height(), //下拉菜单子类内容容器的高度
sort = $('.all-sort-list').height(); //父类分类列表容器的高度
if ( item < sort ){ //如果子类的高度小于父类的高度
if ( eq == 0 ){
$(this).children('.item-list').css('top', (i-h));
} else {
$(this).children('.item-list').css('top', (i-h)+1);
}
} else {
if ( s > h ) { //判断子类的显示位置，如果滚动的高度大于所有分类列表容器的高度
if ( i-s > 0 ){ //则 继续判断当前滑过容器的位置 是否有一半超出窗口一半在窗口内显示的Bug,
$(this).children('.item-list').css('top', (s-h)+2 );
} else {
$(this).children('.item-list').css('top', (s-h)-(-(i-s))+2 );
}
} else {
$(this).children('.item-list').css('top', 3 );
}
}
$(this).addClass('hover');
$(this).children('.item-list').css('display','block');
},function(){
$(this).removeClass('hover');
$(this).children('.item-list').css('display','none');
});
$('.item > .item-list > .close').click(function(){
$(this).parent().parent().removeClass('hover');
$(this).parent().hide();
});
</script>
</body>
</html>
CSS代码(main.css):
@charset "utf-8";/* Remove margin padding */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
/* Default Font */
body,button,input,select,textarea{font:12px/1.5 \5b8b\4f53,arial,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.col-main{float:left;width:100%;min-height:1px;}
.col-sub,.col-extra{float:left;}
.layout:after,.main-wrap:after,.col-sub:after,.col-extra:after{content:'\20';display:block;height:0;clear:both;}
.layout,.main-wrap,.col-sub,.col-extra{zoom:1;}
/* Common Features */
.hidden{display:none;}
.invisible{visibility:hidden;}
/* Remove Float */
.clear{display:block;height:0;overflow:hidden;clear:both;}
.clearfix:after{content:'\20';display:block;height:0;clear:both;}
.clearfix{*zoom:1;}
/* For non ie browsers also display the vertical scroll bar by default,to prevent the flicker caused by the scroll bar */
html{overflow-y:scroll;}
/* Default link styles */
a:link,a:visited{text-decoration:none;}
a:hover,a:active{text-decoration:underline;}
body{height:1500px;}
.top{padding-top:80px;}
.menu{position:relative;width:1210px;margin:0px auto;height:40px;background-color:#E4393C;}
.menu div{position:absolute;top:0px;height:40px;font-family:"Microsoft Yahei";}
.menu .all-sort{left:0px;width:210px;text-align:center;font-size:14px;}
.menu .all-sort a{color:#FFF;display:block;width:100%;height:100%;line-height:40px;}
.menu .ad{right:0px;width:141px;}
.menu .nav{left:210px;}
.menu .nav ul li{float:left;width:85px;line-height:40px;}
.menu .nav ul li a{display:block;width:100%;color:#FFF;text-align:center;font:700 15px/40px "Microsoft Yahei";}
.menu .nav ul li a:hover,.menu .nav ul li a.current{background:#A40000;text-decoration:none;}
.wrap{width:1210px;margin:0px auto;}
.all-sort-list{position:relative;width:203px;border:2px solid #E4393C;border-top:none;padding:3px 3px 3px 0px;background:#FAFAFA;}
.all-sort-list .item{height:30px;border-top:1px solid #FFFFFF;}
.all-sort-list .item.bo{border-top:none;}
.all-sort-list .item h3{height:28px;line-height:28px;border:1px 0px;font-size:14px;font-weight:normal;width:199px;overflow:hidden;}
.all-sort-list .hover h3{position:relative;z-index:13;background:#FFF;border-color:#DDD;border-width:1px 0px;border-style:solid;}
.all-sort-list .item span{padding:0px 5px;color:#A40000;font-family:"\5B8B\4F53";}
.all-sort-list .item a{color:#000;text-decoration:none;}
.all-sort-list .item a:hover{font-weight:bold;color:#E4393C;}
.all-sort-list .item-list{display:none;position:absolute;width:705px;min-height:200px;_height:200px;background:#FFF;left:198px;box-shadow:0px 0px 10px #DDDDDD;border:1px solid #DDD;top:3px;z-index:10;}
.all-sort-list .item-list .close{position:absolute;width:26px;height:26px;color:#FFFFFF;cursor:pointer;top:-1px;right:-26px;font-size:20px;line-height:20px;text-align:center;font-family:"Microsoft Yahei";background:rgba(0,0,0,0.6);background-color:transparent\9;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,startColorstr='#60000000',endColorstr='#60000000');}
.item-list .subitem{float:left;width:477px;padding:0px 4px 0px 8px;}
.item-list .subitem dl{border-top:1px solid #EEE;padding:6px 0px;overflow:hidden;zoom:1;}
.item-list .subitem .fore1{border-top:none;}
.item-list .subitem dt{float:left;width:54px;line-height:22px;text-align:right;padding:3px 6px 0px 0px;font-weight:700;color:#E4393C;}
.item-list .subitem dt a{color:#E4393C;text-decoration:underline;}
.item-list .subitem dd{float:left;width:415px;padding:3px 0px 0px;overflow:hidden;}
.item-list .subitem dd em{float:left;height:14px;line-height:14px;padding:0px 8px;margin-top:5px;border-left:1px solid #CCC;}
.item-list .subitem dd em a,.item-list .cat-right dd a{color:#666;text-decoration:none;}
.item-list .subitem dd em a:hover,.item-list .cat-right dd a:hover{font-weight:normal;text-decoration:underline;}
.item-list .cat-right{float:right;width:210px;}
.item-list .cat-right dl{width:194px;padding:6px 8px;}
.item-list .cat-right dd{padding-top:6px;line-height:22px;overflow:hidden;padding:3px 0px 0px;}
.item-list .cat-right dt{padding:3px 6px 0px 0px;font-weight:700;color:#E4393C;}
.item-list .cat-right dd a:hover{color:#666;}
分享到QQ
分享到微博
微信扫一扫
