仿京东商城，一号店商品多级分类精美菜单

上段时间，商城改版，其中需要设计一个像京东商城，一号店那样的商品分类弹出菜单，参考了下它们的，终于弄出来了，现在和大家分享下：

代码片段：

<div id="category">
  <h2 class="title"><a href="category/goods" target="_blank">所有商品分类</a></h2>
  <div class="content">
    <div class="item" οnmοuseοver="this.className='hover';" οnmοuseοut="this.className='item';">
      <h2><a href="http://www.sweiku.com" target="_blank">服装服饰</a><b></b></h2>
      <div class="out">
        <div class="subcategory">
          <div class="dl">
            <dt><a href="http://www.sweiku.com" target="_blank" title="女装">女装</a></dt>
            <dd> <a href="http://www.sweiku.com" title="毛衣" target="_blank">毛衣</a> <a href="http://www.sweiku.com?app=search&cate_id=15" title="羊毛衫" target="_blank">羊毛衫</a> <a href="http://www.sweiku.com?app=search&cate_id=16" title="皮衣" target="_blank">皮衣</a> <a href="http://www.sweiku.com?app=search&cate_id=17" title="棉衣" target="_blank" class="nbd">棉衣</a>
              <div class="clr"></div>
            </dd>
            <div class="clr"></div>
          </div>
          <div class="dl">
            <dt><a href="http://www.sweiku.com" target="_blank" title="男装">男装</a></dt>
            <dd> <a href="http://www.sweiku.com" title="夹克" target="_blank">夹克</a> <a href="http://www.sweiku.com?app=search&cate_id=19" title="毛衣" target="_blank">毛衣</a> <a href="http://www.sweiku.com0" title="棉衣" target="_blank">棉衣</a> <a href="http://www.sweiku.com1" title="羽绒" target="_blank">羽绒</a> <a href="http://www.sweiku.com2" title="牛仔裤" target="_blank" class="nbd">牛仔裤</a>
              <div class="clr"></div>
            </dd>
            <div class="clr"></div>
          </div>
          <div class="dl">
            <dt><a href="http://www.sweiku.com" target="_blank" title="内衣">内衣</a></dt>
            <dd> <a href="http://www.sweiku.com" title="保暖" target="_blank">保暖</a> <a href="http://www.sweiku.com4" title="文胸" target="_blank">文胸</a> <a href="http://www.sweiku.com5" title="睡衣" target="_blank">睡衣</a> <a href="http://www.sweiku.com6" title="内裤" target="_blank">内裤</a> <a href="http://www.sweiku.com7" title="袜子" target="_blank" class="nbd">袜子</a>
              <div class="clr"></div>
            </dd>
            <div class="clr"></div>
          </div>
          <div class="dl">
            <dt><a href="http://www.sweiku.com" target="_blank" title="冬装新款">冬装新款</a></dt>
            <dd> <a href="http://www.sweiku.com" title="羽绒服" target="_blank">羽绒服</a> <a href="http://www.sweiku.com9" title="呢大衣" target="_blank">呢大衣</a> <a href="http://www.sweiku.com?app=search&cate_id=30" title="裤子" target="_blank" class="nbd">裤子</a>
              <div class="clr"></div>
            </dd>
            <div class="clr"></div>
          </div>
          <div class="dl">
            <dt><a href="http://www.sweiku.com" target="_blank" title="童装">童装</a></dt>
            <dd> <a href="http://www.sweiku.com" title="套装" target="_blank">套装</a> <a href="http://www.sweiku.com?app=search&cate_id=32" title="羽绒" target="_blank">羽绒</a> <a href="http://www.sweiku.com?app=search&cate_id=33" title="棉裤" target="_blank">棉裤</a>  <a href="http://www.sweiku.com?app=search&cate_id=33" title="棉裤" target="_blank">棉裤</a> <a href="http://www.sweiku.com?app=search&cate_id=33" title="棉裤" target="_blank">棉裤</a> <a href="http://www.sweiku.com?app=search&cate_id=33" title="棉裤" target="_blank">棉裤</a> <a href="http://www.sweiku.com?app=search&cate_id=33" title="棉裤" target="_blank">棉裤</a> <a href="http://www.sweiku.com?app=search&cate_id=33" title="棉裤" target="_blank">棉裤</a><a href="http://www.sweiku.com?app=search&cate_id=34" title="童靴" target="_blank" class="nbd">童靴</a>
              <div class="clr"></div>
            </dd>
            <div class="clr"></div>
          </div>
        </div>
       <div class="hotview">
          <h3>热门品牌</h3>
          <div>  </div>
        </div>
      </div>
    </div>
  </div>
 </div>

 CSS 代码:

body {color: #666666;font: 12px Arial,Lucida,Verdana,Helvetica,sans-serif;height: 100%;width: 100%;padding:10px;}
*{margin: 0;padding: 0;}
em{font-style:normal; margin:0;padding:0;}
ul{ list-style:none; margin:0;padding:0;}
.clr{ display:block; clear:both; overflow:hidden; height:0; line-height:0; font-size:0;}
img{border:0;}

a{ color: #666666;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}
#category {background-color: #F8EEDA;border: 2px solid #990000; width: 201px; }
#category .title {background: url(themes/mall/yhd/styles/default/images/common_bg.gif) no-repeat scroll -165px -169px transparent; 
   height: 25px;width: 195px; margin-left:-2px; margin-top:-1px; padding-top:12px; padding-left:10px;}
#category .title a {color:#910000;cursor: pointer;text-decoration: none; font-size:16px;}
#category .content { display: block; position:relative; z-index:999}
#category .content .item,#category .content .hover,#category .content .item:hover{ padding-left:10px;text-align:left;height:36px; line-height:36px;}
#category .content .item h2{ background: url(jiantou.gif) no-repeat;cursor: pointer;display:block; width:185px; height:35px; line-height:35px;
border-bottom:1px solid #DFCA9F; }
#category .content .item h2 a{ font:14px Arial,Lucida,Verdana,Helvetica,sans-serif;padding-left:5px; color:#910000; font-weight:normal; height:35px; 
line-height:35px; }
#category .content .item h2 a:hover{ text-decoration:none;}
#category .content .item .out,#category .content .item b{ display:none;}
#category .content .hover h2,#category .content .item:hover h2{ border:1px solid #990000;margin-left:-1px; height:34px; line-height:34px; 
position:relative; z-index:999; _width:167px; width:167px; background:#FFF!important;}
#category .content .hover .out,#category .content .item:hover .out{ display:block; position:absolute; left:177px; top:0;border:1px #990000 solid;
 background:#fff;width:580px; float:left; z-index:998; min-height:360px;_height:360px; background:#F8EEDA;}
#category .content .hover h2 b,#category .content .item:hover h2 b{ position:absolute; display:block;height:34px; width:1px;overflow:hidden;
left:167px;top:0;background:#fff; z-index:1001;}
#category .content .hover h2 a,#category .content .item:hover h2 a{ padding-left:5px; color: #910000;
font: 14px/35px Arial,Lucida,Verdana,Helvetica,sans-serif;}
#category .content .hover .out .subcategory,#category .content .item:hover .out .subcategory{width:400px; float:left;
 background:#FFF; min-height:360px;height:100%;}
#category .content .hover .out .subcategory .dl,#category .content .item:hover .out .subcategory .dl{ border-bottom:1px dotted #ccc; 
overflow:hidden;margin:0 10px; padding:5px 0; float:left; display:inline;}
#category .content .hover .out .subcategory dt,#category .content .item:hover .out .subcategory dt{float:left; width:70px;
 display:inline-block;}
#category .content .hover .out .subcategory dt a,#category .content .item:hover .out .subcategory dt a{color: #BF0000;
 font-weight:bold;line-height:14px;margin:5px 0;}
#category .content .hover .out .subcategory dd,#category .content .item:hover .out .subcategory dd{ padding-left:5px; 
float:left;width:300px; vertical-align:middle;}
#category .content .hover .out .subcategory dd a,#category .content .item:hover .out .subcategory dd a { border-right: 1px solid #F1E3E3;
color: #545454;height: 14px;line-height: 14px;padding: 0 8px;white-space:nowrap;margin:5px 0; float:left;}
#category .content .hover .out .subcategory dd .nbd,#category .content .item:hover .out .subcategory dd .nbd{ border:none;}
#category .content .hover .out .subcategory dd a:hover,#category .content .item:hover .out .subcategory dd .hover{ color:#bf0000;} 
#category .content .hover .out .hotview,#category .content .item:hover .out .hotview{float:right;padding: 0 18px; width: 140px;
 min-height:360px; _height:360px;}
#category .content .hover .out .hotview h3,#category .content .item:hover .out .hotview h3 {color: #bf0000; font-weight:bold;
height: 31px;line-height: 31px; margin:0;padding: 0;}
#category .content .hover .out .hotview div a,#category .content .item:hover .out .hotview div a{color: #666666; display:block;
margin-right: 10px; white-space:nowrap;}

 

上面效果通过IE6，IE7，IE8，IE9，火狐，谷歌等主流浏览器测试

 

完整代码下载地址：

http://www.sweiku.com/jingdong-yihaodian-multiple-level-category-menu.html

 

 

转载于:https://www.cnblogs.com/xxm6318/archive/2012/07/27/2612472.html