问题：关于贴友分类菜单的实现_html/css_WEB-ITnose

来源：http://www.ido321.com/868.html

贴友需求，实现图示菜单的分类

我对于这个问题的实现，不足之处，请求指正。

html：

   1: 

   2:     
     
   3:         
所有分类
     
   4:         
     
   5:             
精美包包
     
   6:             
   7:                 
双肩包
     
   8:                 
手提包
     
   9:                 
女包
     
  10:                 
男包
     
  11:             
     
  12:         
     
  13:         
     
  14:             
时尚手表
     
  15:             
  16:                 
充电器
     
  17:                 
男表
     
  18:                 
女表
     
  19:                 
情侣表
     
  20:             
     
  21:         
     
  22:         
     
  23:             
时尚化妆品
     
  24:             
  25:                 
润肤霜
     
  26:                 
面膜
     
  27:                 
彩妆用品
     
  28:             
     
  29:         
     
  30:         
     
  31:             
潮流卫衣
     
  32:             
  33:                 
男士卫衣
     
  34:                 
女士卫衣
     
  35:                 
进口卫衣
     
  36:             
     
  37:         
     
  38:     

  39: 

css:

   1: *

   2: {

   3:     margin: 0 auto;

   4: }

   5: .test

   6: {

   7:     width: 200px;

   8:     height: 350px;

   9:     border: 1px solid red;

  10: }

  11: h3

  12: {

  13:     background-color: #B90101;

  14:     padding: 5px;

  15:     color: white;

  16: }

  17: .fenlei

  18: {

  19:     border-bottom: 1px solid #ccc;

  20:     width: 190px;

  21:     margin-top: 5px;

  22:     margin-left: 5px;

  23:     float: left;

  24: }

  25: .fenlei ul

  26: {

  27:     position: relative;

  28:     margin-left: -30px;

  29:     float: left;

  30: }

  31: .fenlei li

  32: {

  33:     float: left;

  34:     text-align: left;

  35:     margin-left: 20px;

  36:     margin-top: 5px;

  37: }

效果如图：

演示地址：http://jsfiddle.net/Web_Code/yhLnj7gh/embedded/result/