模仿京东多级菜单
Posted tangyouwei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模仿京东多级菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>京东商城导航菜单</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin:0;
font-family: "microsoft yahei";
font-size: 14px;
}
.nav{
border: 2px solid rgb(177,25,26);
display: block;
width: 210px;
text-indent: 2em;
margin-left: 20px;
margin-top: 20px;
position: relative;
}
.nav_top{
display: block;
background: rgb(177,25,26);
line-height: 44px;
color: #fff;
text-align: center
//margin-left: 10px;
}
.nav_content{
display: block;
line-height: 31px;
list-style: none;
width: 206px;
position: relative;
}
.nav_content li{
display: block;
margin-left:0;
padding:0;
z-index: 3;
background:url("http://img.mukewang.com/5411027300014f0200220030.jpg") no-repeat;
background-position:right;
}
.nav_content li a{
display: block;
color: rgb(45,45,45);
text-decoration: none;
}
.nav_content li a:hover{
//color:rgb(200,22,35);
text-decoration:underline;
font-weight: bold;
}
.nav_content li:hover {
background-image: none;
border:2px 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;
}
.submenu{
display: none;
position: absolute;
z-index: 4;
left:200px;
top:0px;
width:800px;
border:1px solid #DDD;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow:0 0 8px #DDD;
-webkit-box-shadow:0 0 8px #DDD;
text-indent:0;
}
.leftdiv{
float: left;
margin:5px;
width: 500px;
//border:1px solid red;
}
.leftdiv dl dd a,.leftdiv dl dt{
display: block;
float: left;
}
.leftdiv dl{
display: block;
border-bottom:1px solid #ddd;
padding-bottom: 6px;
overflow: hidden;
line-height:31px;
margin:15px 0;
}
.leftdiv dl dt{
display: block;
float: left;
width:60px;
height:22px;
line-height: 22px;
text-align: right;
padding-right:6px;
}
.leftdiv dl dt a{
color: rgb(177,25,26);
font-size: 10pt;
font-weight: bold;
text-decoration: underline;
}
..leftdiv dl dd{
display: block;
overflow: hidden;
}
.leftdiv dl dd a{
display: block;
float: left;
color: #737373;
padding: 0 8px;
height:14px;
line-height: 14px;
text-align: center;
border-left: 2px solid #ccc;
font-weight: bold;
font-size: 13px;
//margin:4px 0;
margin-top: 4px;
}
.rightdiv{
width: 240px;
float: left;
margin-top:5px;
//border:1px solid red;
overflow: hidden;
}
.rightdiv dl,.rightdiv dl dt,.rightdiv dl dd,.rightdiv dl dt a{
display: block;
}
.rightdiv dl dt{
color:rgb(177,25,26);
font-weight: bold;
}
.nav_content li:hover .submenu{
display: block;
}
.nav_content li:hover a span{
height:31px;
width:100px;
background: #FFF;
display: inline-block;
z-index: 20;
float: right;
position: relative;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_top">全部商品分类</div>
<ul class="nav_content">
<li><a href="">家用电器<span></span></a>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">电子书</a></dt>
<dd class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<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 class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<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 class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<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 class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<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 class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<a href="#">免费吗</a> <a href="#">未小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<img width="115" height="50" src="http://img10.360buyimg.com/vclist/jfs/t2176/358/849877519/2001/3cb2806f/562f4971Na5379aba.jpg">
<img width="115" height="50" src="http://img11.360buyimg.com/vclist/jfs/t3148/253/1909760234/2486/7bd8084/57d681e0N86d8a223.jpg">
</dd>
</dl>
<dl>
<dt>推荐品牌</dt>
<dd>
<a href="#">[特惠]精选图书每满150减50</a>
<a href="#">[公告] 因广州图书仓搬仓升级配送延迟</a>
<a href="#">[特惠]爆款手机12期免息 抽奖赢电视</a>
<a href="#">[公告]广东、福建受台风影响配送延迟</a>
<a href="#">[特惠]大闸蟹领券满399减180</a>
</dd>
</dl>
</div>
</div>
</li>
<li><a href="">手机、运营商、数码<span></span></a>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">手机</a></dt>
<dd class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<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 class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<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 class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
<a href="#">免费</a> <a href="#">小说</a> <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 class="aaa">
<a href="#">免费吗</a> <a href="#">未小说</a> <a href="#">文学</a>
<a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<img width="115" height="50" src="http://img20.360buyimg.com/da/jfs/t3031/135/2209629915/87521/a1f520f3/57d762f8N1e210a18.jpg">
<img width="115" height="50" src="http://img.mukewang.com/5705b8100001154506000338-240-135.jpg">
</dd>
</dl>
<dl>
<dt>推荐品牌</dt>
<dd>
<a href="#">[特惠]精选图书每满150减50</a>
<a href="#">[公告] 因广州图书仓搬仓升级配送延迟</a>
<a href="#">[特惠]爆款手机12期免息 抽奖赢电视</a>
<a href="#">[公告]广东、福建受台风影响配送延迟</a>
<a href="#">[特惠]大闸蟹领券满399减180</a>
<a href="#">[特惠]精选图书每满150减50</a>
<a href="#">[公告] 因广州图书仓搬仓升级配送延迟</a>
<a href="#">[特惠]爆款手机12期免息 抽奖赢电视</a>
<a href="#">[公告]广东、福建受台风影响配送延迟</a>
<a href="#">[特惠]大闸蟹领券满399减180</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>
</ul>
</div>
</body>
</html>以上是关于模仿京东多级菜单的主要内容，如果未能解决你的问题，请参考以下文章
HTML CSS 模仿京东页面做出的页面。但是打开页面最下面有个左右滑动栏。导致页面不居中。该怎么解决？