首页>>导航菜单>>纯css的商城左侧大分类导航菜单(2018-05-18)

纯css的商城左侧大分类导航菜单

纯css代码

纯css的商城左侧大分类导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="hc_lnav jslist">  
  2.     <div class="allbtn">  
  3.         <h2><a href="#"><strong> </strong>全部商品分类<i> </i></a></h2>  
  4.         <ul style="width:190px">  
  5.             <li class=a1>  
  6.                 <div class=tx><a href="#"><i> </i>各地名优茶</a> </div>  
  7.                 <div class=pop>  
  8.                     <h3><a href="#">各地名优茶</a></h3>  
  9.                     <div class=clr></div>  
  10.                     <div class=act><a href=""><img src="images/20150518092317.jpg" /></a> </div>  
  11.                 </div>  
  12.             </li>  
  13.             <li class=a2>  
  14.                 <div class=tx><a href=""><i> </i>花草保健茶</a> </div>  
  15.                 <dl>  
  16.                     <dt>推荐</dt>  
  17.                     <dd>  
  18.                         <a href="">大麦茶</a>   
  19.                         <a href="">苦荞茶</a>  
  20.                         <a href="" >玫瑰花茶</a>   
  21.                         <a href="">雪菊</a>  
  22.                         <a href="" >蜂蜜木瓜粉</a>  
  23.                     </dd>  
  24.                 </dl>  
  25.                 <div class=pop>  
  26.                     <h3><a href="">花草保健茶</a></h3>  
  27.                     <dl>  
  28.                         <dl>  
  29.                             <dt>瘦身</dt>  
  30.                             <dd>  
  31.                                 <a class="ui-link" href="" >玫瑰荷叶茶</a>  
  32.                                 <a class="ui-link"    href="">玄米茶</a>   
  33.                                 <a  class="ui-link" href="">兰香子</a>   
  34.                                 <a class="ui-link"   href="" >纤维泡腾片</a>  
  35.                                 <a class="ui-link"   href="" >青梅苹果酸</a>  
  36.                                 <a class="ui-link"   href="">三草茶</a>   
  37.                             </dd>  
  38.                         </dl>  
  39.                         <dl>  
  40.                             <dt>美容</dt>  
  41.                             <dd>  
  42.                                 <a class="ui-link" href="" >法兰西玫瑰</a>  
  43.                                 <a class="ui-link"  href=""  >冻干柠檬片</a>   
  44.                                 <a class="un ui-link"   href="">果粒茶</a>  
  45.                                 <a    class="ui-link" href="" >大麦茶</a>  
  46.                                 <a class="ui-link"   href="">蜂蜜抹茶粉</a>  
  47.                             </dd>  
  48.                         </dl>  
  49.                         <dl>  
  50.                             <dt>丰胸</dt>  
  51.                             <dd>  
  52.                                 <a class="ui-link" href="" >木瓜葛根粉</a>   
  53.                                 <a class="ui-link"    href=""  >蜂蜜木瓜粉</a>  
  54.                                 <a class="ui-link"   href="">红酒木瓜丽人饮</a>  
  55.                             </dd>  
  56.                         </dl>  
  57.                     </dl>  
  58.                     <dl>  
  59.                         <dt>品牌</dt>  
  60.                         <dd>  
  61.                             <a href="">与花香</a>  
  62.                             <a href="">美丽快攻</a>  
  63.                             <a href="" >顶峰</a>  
  64.                         </dd>  
  65.                     </dl>  
  66.                     <dl>  
  67.                         <dt>价格</dt>  
  68.                         <dd>  
  69.                             <a href="" >100元及以下</a>  
  70.                             <a   href="" >100-300元</a>  
  71.                             <a  href="">300元及以上</a>  
  72.                         </dd>  
  73.                     </dl>  
  74.                     <dl>  
  75.                         <dt>净含量</dt>  
  76.                         <dd>  
  77.                             <a href="">50g及以下</a>   
  78.                             <a href="">51-100g</a>  
  79.                             <a href="">101-250g</a>  
  80.                             <a href="">250g以上</a>  
  81.                         </dd>  
  82.                     </dl>  
  83.                     <dl>  
  84.                         <dt>包装</dt>  
  85.                         <dd>  
  86.                             <a href="">经济自饮装</a>  
  87.                             <a href="">精美礼品装</a>  
  88.                         </dd>  
  89.                     </dl>  
  90.                     <div class=clr></div>  
  91.                     <div class=act><a href=""><img src="images/20150518092236.jpg" /></a></div>  
  92.                 </div>  
  93.             </li>  
  94.             <li class=a3>  
  95.                 <div class=tx><a href=""><i> </i>精选茶具</a> </div>  
  96.                 <dl>  
  97.                     <dt>推荐</dt>  
  98.                     <dd>  
  99.                         <a href="" >功夫茶具</a>   
  100.                         <a href="">个人杯</a>   
  101.                         <a href="">茶宠</a>  
  102.                         <a href="">茶叶罐</a>   
  103.                     </dd>  
  104.                 </dl>  
  105.                 <div class=pop>  
  106.                     <h3><a href="">精选茶具</a></h3>  
  107.                     <dl>  
  108.                         <dl>  
  109.                             <dt>陶瓷</dt>  
  110.                             <dd>  
  111.                                 <a class="ui-link" href="">茶叶罐</a>  
  112.                                 <a class="ui-link"  href="">功夫茶具</a>   
  113.                                 <a class="ui-link" href="" >茶壶</a>  
  114.                                 <a class="ui-link"  href="">茶宠</a>  
  115.                                 <a class="ui-link" href=""  >茶杯</a>  
  116.                                 <a class="ui-link"  href="">茶具礼盒</a>   
  117.                             </dd>  
  118.                         </dl>  
  119.                     </dl>  
  120.                     <dl>  
  121.                         <dt>品牌</dt>  
  122.                         <dd>  
  123.                             <a  href="">恒越</a>  
  124.                             <a  href="">卓越</a>  
  125.                             <a   href="">国尊陶瓷</a>   
  126.                             <a  href="">宏远达</a>  
  127.                             <a href="">福万利</a>  
  128.                         </dd>  
  129.                     </dl>  
  130.                     <dl>  
  131.                         <dt>价格</dt>  
  132.                         <dd>  
  133.                             <a href="">100元及以下</a>  
  134.                             <a  href="">100-300元</a>  
  135.                             <a  href="">300元及以上</a>  
  136.                         </dd>  
  137.                     </dl>  
  138.                     <dl>  
  139.                         <dt>包装</dt>  
  140.                         <dd>  
  141.                             <a href="">经济自饮装</a>  
  142.                             <a  href="">精美礼品装</a>  
  143.                         </dd>  
  144.                     </dl>  
  145.                     <div class=clr></div>  
  146.                     <div class=act><a href=""><img src="images/20150518092152.jpg" /></a></div>  
  147.                 </div>  
  148.             </li>  
  149.             <li class=a4>  
  150.                 <div class=tx><a href=""><i> </i>可口茶食</a> </div>  
  151.                 <dl>  
  152.                     <dt>推荐</dt>  
  153.                     <dd>  
  154.                         <a href="">橄榄</a>  
  155.                         <a   href="">冰糖杨梅</a>  
  156.                         <a  href="">酸甜梅</a>   
  157.                     </dd>  
  158.                 </dl>  
  159.                 <div class=pop>  
  160.                     <h3><a href="">可口茶食</a></h3>  
  161.                     <dl>  
  162.                         <dl>  
  163.                             <dt>干果</dt>  
  164.                             <dd>  
  165.                                 <a class="ui-link" href="">杏仁</a>  
  166.                                 <a class="ui-link"   href="">瓜子</a>  
  167.                                 <a  class="un ui-link" href="">开心果</a>  
  168.                             </dd>  
  169.                         </dl>  
  170.                         <dl>  
  171.                             <dt>零食</dt>  
  172.                             <dd>  
  173.                                 <a class="ui-link"  href="">水晶柠檬片</a>  
  174.                                 <a class="ui-link"  href="">方块酥</a>   
  175.                                 <a class="ui-link" href="javascript:;">凤梨酥</a>  
  176.                                 <a  class="ui-link" href="">燕麦巧克力</a>  
  177.                             </dd>  
  178.                         </dl>  
  179.                     </dl>  
  180.                     <dl>  
  181.                         <dt>品牌</dt>  
  182.                         <dd>  
  183.                             <a href="">赛园</a>  
  184.                             <a  href="">新味</a>  
  185.                         </dd>  
  186.                     </dl>  
  187.                     <dl>  
  188.                         <dt>价格</dt>  
  189.                         <dd>  
  190.                             <a  href="">100元及以下</a>  
  191.                             <a  href="">100-300元</a>  
  192.                             <a  href="">300元及以上</a>  
  193.                         </dd>  
  194.                     </dl>  
  195.                     <dl>  
  196.                         <dt>净含量</dt>  
  197.                         <dd>  
  198.                             <a  href="" >50g及以下</a>   
  199.                             <a   href="">51-100g</a>  
  200.                             <a  href="">101-250g</a>  
  201.                             <a  href="">250g以上</a>  
  202.                         </dd>  
  203.                     </dl>  
  204.                     <dl>  
  205.                         <dt>包装</dt>  
  206.                         <dd>  
  207.                             <a  href="">经济自饮装</a>  
  208.                             <a   href="">精美礼品装</a>  
  209.                         </dd>  
  210.                     </dl>  
  211.                     <div class=clr></div>  
  212.                     <div class=act><a href=""><img src="images/20150518092213.jpg" /></a> </div>  
  213.                 </div>  
  214.             </li>  
  215.         </ul>  
  216.     </div>  
  217. </div>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_650.html