基于div CSS下拉導航菜單分類代碼是一款綠色風格的jQuery下拉分類導航菜單。效果圖如下:

在線預覽 源碼下載
實現的代碼。
html代碼:
<div class="hc_lnav jslist"> <div class="allbtn"> <h2><a href="#"><strong> </strong>全部商品分類<i> </i></a></h2> <ul style="width:190px" class="jspop box"> <li class=a1> <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> <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> </dd> </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="ui-link" href="">祁門紅茶</a> <a class="ui-link" href="">坦洋工夫</a> <a class="ui-link" href="javascr>其他紅茶</a> <a class="un 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> <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="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> <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="">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/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>
via:http://www.w2bc.com/article/58756
新聞熱點
疑難解答