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

代码片段：

     
  
      
所有商品分类
  
      
    
       
      
        
服装服饰
      
        
        
         
          
          
 
           
            女装
           
 
           
 
            毛衣 
            羊毛衫 
            皮衣 
            棉衣 
            
 
           
 
           
 
          
          
          
 
           
            男装
           
 
           
 
            夹克 
            毛衣 
            棉衣 
            羽绒 
            牛仔裤 
            
 
           
 
           
 
          
          
          
 
           
            内衣
           
 
           
 
            保暖 
            文胸 
            睡衣 
            内裤 
            袜子 
            
 
           
 
           
 
          
          
          
 
           
            冬装新款
           
 
           
 
            羽绒服 
            呢大衣 
            裤子 
            
 
           
 
           
 
          
          
          
 
           
            童装
           
 
           
 
            套装 
            羽绒 
            棉裤 
            棉裤 
            棉裤 
            棉裤 
            棉裤 
            棉裤
            童靴 
            
 
           
 
           
 
          
        
         
       
         
          
          
热门品牌
          
          
 
          
        
         
      
        
    
       
  
      
 
     

 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，火狐，谷歌等主流浏览器测试

 

完整代码下载地址：