模仿京东商城首页多级导航菜单

最新推荐文章于 2023-03-16 23:34:49 发布
吃瓜群众欢乐多
最新推荐文章于 2023-03-16 23:34:49 发布
阅读量2.4k
点赞数
本文链接：https://blog.csdn.net/sinat_36146776/article/details/52565159
版权
</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>
吃瓜群众欢乐多
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
模仿京东商城首页多级导航菜单

京东商城导航菜单 *{ 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; m
复制链接

扫一扫