纯css的商城左侧大分类导航菜单
纯css代码
XML/HTML Code
- <div class="hc_lnav jslist">
- <div class="allbtn">
- <h2><a href="#"><strong> </strong>全部商品分类<i> </i></a></h2>
- <ul style="width:190px">
- <li class=a1>
- <div class=tx><a href="#"><i> </i>各地名优茶</a> </div>
- <div class=pop>
- <h3><a href="#">各地名优茶</a></h3>
- <div class=clr></div>
- <div class=act><a href=""><img src="images/20150518092317.jpg" /></a> </div>
- </div>
- </li>
- <li class=a2>
- <div class=tx><a href=""><i> </i>花草保健茶</a> </div>
- <dl>
- <dt>推荐</dt>
- <dd>
- <a href="">大麦茶</a>
- <a href="">苦荞茶</a>
- <a href="" >玫瑰花茶</a>
- <a href="">雪菊</a>
- <a href="" >蜂蜜木瓜粉</a>
- </dd>
- </dl>
- <div class=pop>
- <h3><a href="">花草保健茶</a></h3>
- <dl>
- <dl>
- <dt>瘦身</dt>
- <dd>
- <a class="ui-link" href="" >玫瑰荷叶茶</a>
- <a class="ui-link" href="">玄米茶</a>
- <a class="ui-link" href="">兰香子</a>
- <a class="ui-link" href="" >纤维泡腾片</a>
- <a class="ui-link" href="" >青梅苹果酸</a>
- <a class="ui-link" href="">三草茶</a>
- </dd>
- </dl>
- <dl>
- <dt>美容</dt>
- <dd>
- <a class="ui-link" href="" >法兰西玫瑰</a>
- <a class="ui-link" href="" >冻干柠檬片</a>
- <a class="un ui-link" href="">果粒茶</a>
- <a class="ui-link" href="" >大麦茶</a>
- <a class="ui-link" href="">蜂蜜抹茶粉</a>
- </dd>
- </dl>
- <dl>
- <dt>丰胸</dt>
- <dd>
- <a class="ui-link" href="" >木瓜葛根粉</a>
- <a class="ui-link" href="" >蜂蜜木瓜粉</a>
- <a class="ui-link" href="">红酒木瓜丽人饮</a>
- </dd>
- </dl>
- </dl>
- <dl>
- <dt>品牌</dt>
- <dd>
- <a href="">与花香</a>
- <a href="">美丽快攻</a>
- <a href="" >顶峰</a>
- </dd>
- </dl>
- <dl>
- <dt>价格</dt>
- <dd>
- <a href="" >100元及以下</a>
- <a href="" >100-300元</a>
- <a href="">300元及以上</a>
- </dd>
- </dl>
- <dl>
- <dt>净含量</dt>
- <dd>
- <a href="">50g及以下</a>
- <a href="">51-100g</a>
- <a href="">101-250g</a>
- <a href="">250g以上</a>
- </dd>
- </dl>
- <dl>
- <dt>包装</dt>
- <dd>
- <a href="">经济自饮装</a>
- <a href="">精美礼品装</a>
- </dd>
- </dl>
- <div class=clr></div>
- <div class=act><a href=""><img src="images/20150518092236.jpg" /></a></div>
- </div>
- </li>
- <li class=a3>
- <div class=tx><a href=""><i> </i>精选茶具</a> </div>
- <dl>
- <dt>推荐</dt>
- <dd>
- <a href="" >功夫茶具</a>
- <a href="">个人杯</a>
- <a href="">茶宠</a>
- <a href="">茶叶罐</a>
- </dd>
- </dl>
- <div class=pop>
- <h3><a href="">精选茶具</a></h3>
- <dl>
- <dl>
- <dt>陶瓷</dt>
- <dd>
- <a class="ui-link" href="">茶叶罐</a>
- <a class="ui-link" href="">功夫茶具</a>
- <a class="ui-link" href="" >茶壶</a>
- <a class="ui-link" href="">茶宠</a>
- <a class="ui-link" href="" >茶杯</a>
- <a class="ui-link" href="">茶具礼盒</a>
- </dd>
- </dl>
- </dl>
- <dl>
- <dt>品牌</dt>
- <dd>
- <a href="">恒越</a>
- <a href="">卓越</a>
- <a href="">国尊陶瓷</a>
- <a href="">宏远达</a>
- <a href="">福万利</a>
- </dd>
- </dl>
- <dl>
- <dt>价格</dt>
- <dd>
- <a href="">100元及以下</a>
- <a href="">100-300元</a>
- <a href="">300元及以上</a>
- </dd>
- </dl>
- <dl>
- <dt>包装</dt>
- <dd>
- <a href="">经济自饮装</a>
- <a href="">精美礼品装</a>
- </dd>
- </dl>
- <div class=clr></div>
- <div class=act><a href=""><img src="images/20150518092152.jpg" /></a></div>
- </div>
- </li>
- <li class=a4>
- <div class=tx><a href=""><i> </i>可口茶食</a> </div>
- <dl>
- <dt>推荐</dt>
- <dd>
- <a href="">橄榄</a>
- <a href="">冰糖杨梅</a>
- <a href="">酸甜梅</a>
- </dd>
- </dl>
- <div class=pop>
- <h3><a href="">可口茶食</a></h3>
- <dl>
- <dl>
- <dt>干果</dt>
- <dd>
- <a class="ui-link" href="">杏仁</a>
- <a class="ui-link" href="">瓜子</a>
- <a class="un ui-link" href="">开心果</a>
- </dd>
- </dl>
- <dl>
- <dt>零食</dt>
- <dd>
- <a class="ui-link" href="">水晶柠檬片</a>
- <a class="ui-link" href="">方块酥</a>
- <a class="ui-link" href="javascript:;">凤梨酥</a>
- <a class="ui-link" href="">燕麦巧克力</a>
- </dd>
- </dl>
- </dl>
- <dl>
- <dt>品牌</dt>
- <dd>
- <a href="">赛园</a>
- <a href="">新味</a>
- </dd>
- </dl>
- <dl>
- <dt>价格</dt>
- <dd>
- <a href="">100元及以下</a>
- <a href="">100-300元</a>
- <a href="">300元及以上</a>
- </dd>
- </dl>
- <dl>
- <dt>净含量</dt>
- <dd>
- <a href="" >50g及以下</a>
- <a href="">51-100g</a>
- <a href="">101-250g</a>
- <a href="">250g以上</a>
- </dd>
- </dl>
- <dl>
- <dt>包装</dt>
- <dd>
- <a href="">经济自饮装</a>
- <a href="">精美礼品装</a>
- </dd>
- </dl>
- <div class=clr></div>
- <div class=act><a href=""><img src="images/20150518092213.jpg" /></a> </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
原文地址:http://www.freejs.net/article_daohangcaidan_650.html