模仿京東商城首頁多級導航選單
阿新 • • 發佈：2019-01-25
</pre><pre name="code" class="html"><!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>