商城左側(cè)大分類導(dǎo)航菜單教程完整代碼
提示：本頁面右側(cè)代碼編輯器中的代碼純屬展示調(diào)試代碼
本代碼最終的效果請(qǐng)用下面的的完整代碼，復(fù)制到本地運(yùn)行
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商城左側(cè)大分類導(dǎo)航菜單</title>
</head>
<body>
<style>
*{
margin:0;
padding:0;
list-style-type:none;
}
body{
line-height:2em;
font-size:12px
}
a{
color:#666666;
text-decoration:none;
}
.hc_lnav{ /*全部商品導(dǎo)航欄樣式*/
width:190px;
margin-top: 70px;
margin-left: 120px;
}
.hc_lnav .allbtn{
position:relative /*全部商品下面菜單的定位*/
}
.hc_lnav .allbtn h2 a{
line-height:36px;
background-color:#358000;
padding-left:10px;
width:180px;
display:block;
height:36px;
color:#ffffff;
font-size:14px;
}
.hc_lnav .allbtn h2 a:hover {
background-color:#358000; /*鼠標(biāo)停留在全部商品導(dǎo)航欄上面的樣式*/
}
.hc_lnav .allbtn ul {
position:absolute;
background-color:#60a411; /*鼠標(biāo)停留在全部商品導(dǎo)航欄上面下面菜單的樣式*/
width:190px;
display:none;
height:486px;
top:36px;
}
.hc_lnav .allbtn ul li{ /*ul下面li的樣式*/
padding-bottom:7px;
clear:both;
cursor:default
}
.hc_lnav .allbtn ul li .tx{ /*每個(gè)商品大分類的樣式，*/
line-height:35px;
background-color:#559b0d;
padding-left:10px;
background-repeat:no-repeat;
height:35px;
}
.hc_lnav .allbtn ul li .tx a{
font-family:微軟雅黑, 黑體;
color: #e6f8e9;font-size:14px;
}
.hc_lnav .allbtn ul li .tx a i{
line-height:25px; /*選項(xiàng)旁邊的圖片*/
margin-top:5px;
width:25px;
float:left;
height:25px;
margin-right:10px;
}
/*div里面的小圖片，像各地名優(yōu)茶旁邊的圖*/
.hc_lnav .allbtn ul li.a1 .tx a i{background-image:url(/upload/course/000/000/006/5822dac38ab18673.png)}
.hc_lnav .allbtn ul li.a2 .tx a i{background-image:url(/upload/course/000/000/006/5822dadc7f048889.png)}
.hc_lnav .allbtn ul li.a3 .tx a i{background-image:url(/upload/course/000/000/006/5822daff1dc12522.png)}
.hc_lnav .allbtn ul li.a4 .tx a i{background-image:url(/upload/course/000/000/006/5822db0c56bdf566.png)}
.hc_lnav .allbtn ul li dl{ /*菜單下面最右側(cè)的樣式*/
zoom:1;
color:#ffffff;
clear:both;
overflow:auto;
padding-top:4px
}
.hc_lnav .allbtn ul li dl a{ /*菜單下面最左側(cè)的樣式*/
line-height:22px;
float:left;
color:#d9e7ce;
margin-left:6px;
margin-right:6px;
}
.hc_lnav .allbtn ul li dt{ /*最右側(cè)的分類dt樣式*/
padding-left:10px;
width:30px;
float:left;
padding-top:1px
}
.hc_lnav .allbtn ul li dd{ /*最左側(cè)的分類dt樣式*/
line-height:22px;
width:150px;
float:left;
padding-top:2px
}
/*二級(jí)導(dǎo)航隱藏*/
.hc_lnav .allbtn ul li .pop{ /*二級(jí)導(dǎo)航隱藏的樣式*/
border-bottom:#599900 2px solid;
position:absolute;
border-left:medium none;
background-color:#fcfcfc;
min-height:466px;
padding-left:30px;
width:640px;
padding-right:30px;
display:none;
height:464px;
border-top:medium none;
border-right:#599900 2px solid;
padding-top:10px;
left:190px;
}
.hc_lnav .allbtn ul li .pop dl:hover{
background-color:#f3f3f3 /*鼠標(biāo)瀏覽二級(jí)隱藏域商品時(shí)的背景色*/
}
.hc_lnav .allbtn ul li .pop dl a{
color:#666666;
margin-left:12px; /*二級(jí)隱藏域商品鏈接a標(biāo)簽的樣式*/
margin-right:12px
}
.hc_lnav .allbtn ul li .pop dt{ /*二級(jí)隱藏域最右側(cè)的標(biāo)簽樣式*/
padding-left:5px;
width:72px;
}
.hc_lnav .allbtn ul li .pop dd{ /*二級(jí)隱藏域左側(cè)的商品樣式標(biāo)簽*/
width:565px;
margin-left:-12px;
}
.hc_lnav .allbtn ul li .pop .act{ /*二級(jí)隱藏域下端的圖片*/
width:640px;
height:80px;
overflow:hidden;
padding-top:10px
}
.hc_lnav .allbtn:hover ul{ /*控制一級(jí)菜單顯示隱藏*/
display:block
}
.hc_lnav .allbtn ul li:hover{
background-color:#fcfcfc /*鼠標(biāo)停留一級(jí)隱藏域的背景色*/
}
.hc_lnav .allbtn ul li:hover .tx{ /*鼠標(biāo)停留一級(jí)隱藏域商品分類的的背景色*/
background-color:#f5f5f5
}
.hc_lnav .allbtn ul li:hover .tx a{ /*當(dāng)鼠標(biāo)停留在另一個(gè)a標(biāo)簽上面的時(shí)候，上一個(gè)a標(biāo)簽的顏色*/
color:#333333
}
.hc_lnav .allbtn ul li:hover .pop{ /*控制二級(jí)菜單顯示隱藏*/
display:block;
top:0px;
left:190px
}
.hc_lnav .allbtn ul li:hover dl{ /*一級(jí)隱藏域和二級(jí)隱藏域最右側(cè)的字體樣式顏色*/
color:#6e6e6e
}
.hc_lnav .allbtn ul li:hover a{
color:#666666
}
.hc_lnav .allbtn ul li:hover a:hover{ /*鼠標(biāo)停留在商品上面的字體顏色*/
color:#cd0606
}
</style>
<!-- 代碼部分begin -->
<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>各地名優(yōu)茶</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="#">各地名優(yōu)茶</a></h3>
<dl>
<dl>
<dt>綠茶</dt>
<dd>
<a class="" href="#">西湖龍井</a>
<a class="" href="#">龍井</a>
<a class="" href="#">黃山毛峰</a>
<a class="" href="#">安吉白茶</a>
<a class="" href="#">其他綠茶</a>
</dd>
</dl>
<dl>
<dt>烏龍茶</dt>
<dd>
<a class="" href="">鐵觀音</a>
<a class="" href="">大紅袍</a>
<a class="" href="">水仙</a>
<a class="" href="">肉桂</a>
<a class="" href="">臺(tái)灣烏龍</a>
<a class="" href="">其他烏龍茶</a>
</dd>
</dl>
<dl>
<dt>紅茶</dt>
<dd>
<a class="" href="" >金駿眉</a>
<a class="" href="">正山小種</a>
<a class="" href="">祁門紅茶</a>
<a class="" href="">坦洋工夫</a>
<a class="" href="">其他紅茶</a>
<a class="" href="">政和工夫</a>
<a class="" href="">滇紅工夫</a>
</dd>
</dl>
<dl>
<dt>黑茶</dt>
<dd>
<a class="" href="">白沙溪黑茶</a>
<a class="" href="">普洱茶餅</a>
<a class="" href="">普洱沱茶</a>
<a class="" href="">普洱茶磚</a>
<a class="" href="">普洱散茶</a>
<a class="" href="">其他黑茶</a>
</dd>
</dl>
<dl>
<dt>白茶</dt>
<dd>
<a class="" href="#">白牡丹</a>
<a class="" href="">白毫銀針</a>
<a class="" href="">壽眉</a>
<a class="" href="">其他白茶</a>
</dd>
</dl>
</dl>
<dl>
<dt>品牌</dt>
<dd>
<a href="">滋恩</a>
<a href="">遠(yuǎn)榮</a>
<a href="">頂峰</a>
<a href="">公泰</a>
<a href="">一品堂</a>
<a href="">好吉</a>
<a href="">綠雪芽</a>
<a href="">臺(tái)灣梅山制茶</a>
<a href="" >白沙溪</a>
<a href="">聯(lián)興茶葉</a>
</dd>
</dl>
<dl>
<dt>價(jià)格</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="">經(jīng)濟(jì)自飲裝</a>
<a href="" >精美禮品裝</a>
</dd>
</dl>
<div class=clr></div>
<div class=act><a href=""><img src="/upload/course/000/000/006/5822db4b7e0c2557.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="" href="" >玫瑰荷葉茶</a>
<a class="" href="">玄米茶</a>
<a class="" href="">蘭香子</a>
<a class="" href="" >纖維泡騰片</a>
<a class="" href="" >青梅蘋果酸</a>
<a class="" href="">三草茶</a>
</dd>
</dl>
<dl>
<dt>美容</dt>
<dd>
<a class="" href="" >法蘭西玫瑰</a>
<a class="" href="" >凍干檸檬片</a>
<a class="" href="">果粒茶</a>
<a class="" href="" >大麥茶</a>
<a class="" href="">蜂蜜抹茶粉</a>
</dd>
</dl>
<dl>
<dt>豐胸</dt>
<dd>
<a class="" href="" >木瓜葛根粉</a>
<a class="" href="" >蜂蜜木瓜粉</a>
<a class="" href="">紅酒木瓜麗人飲</a>
</dd>
</dl>
</dl>
<dl>
<dt>品牌</dt>
<dd>
<a href="">與花香</a>
<a href="">美麗快攻</a>
<a href="" >頂峰</a>
</dd>
</dl>
<dl>
<dt>價(jià)格</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="">經(jīng)濟(jì)自飲裝</a>
<a href="">精美禮品裝</a>
</dd>
</dl>
<div class=clr></div>
<div class=act><a href=""><img src="/upload/course/000/000/006/5822db638c034508.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="">個(gè)人杯</a>
<a href="">茶寵</a>
<a href="">茶葉罐</a>
</dd>
</dl>
<div class=pop>
<h3><a href="">精選茶具</a></h3>
<dl>
<dl>
<dt>陶瓷</dt>
<dd>
<a class="" href="">茶葉罐</a>
<a class="" href="">功夫茶具</a>
<a class="" href="" >茶壺</a>
<a class="" href="">茶寵</a>
<a class="" href="" >茶杯</a>
<a class="" href="">茶具禮盒</a>
</dd>
</dl>
</dl>
<dl>
<dt>品牌</dt>
<dd>
<a href="">恒越</a>
<a href="">卓越</a>
<a href="">國尊陶瓷</a>
<a href="">宏遠(yuǎn)達(dá)</a>
<a href="">福萬利</a>
</dd>
</dl>
<dl>
<dt>價(jià)格</dt>
<dd>
<a href="">100元及以下</a>
<a href="">100-300元</a>
<a href="">300元及以上</a>
</dd>
</dl>
<dl>
<dt>包裝</dt>
<dd>
<a href="">經(jīng)濟(jì)自飲裝</a>
<a href="">精美禮品裝</a>
</dd>
</dl>
<div class=clr></div>
<div class=act><a href=""><img src="/upload/course/000/000/006/5822db7711047243.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="" href="">杏仁</a>
<a class="" href="">瓜子</a>
<a class="" href="">開心果</a>
</dd>
</dl>
<dl>
<dt>零食</dt>
<dd>
<a class="" href="">水晶檸檬片</a>
<a class="" href="">方塊酥</a>
<a class="" href="javascript:;">鳳梨酥</a>
<a class="" href="">燕麥巧克力</a>
</dd>
</dl>
</dl>
<dl>
<dt>品牌</dt>
<dd>
<a href="">賽園</a>
<a href="">新味</a>
</dd>
</dl>
<dl>
<dt>價(jià)格</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="">經(jīng)濟(jì)自飲裝</a>
<a href="">精美禮品裝</a>
</dd>
</dl>
<div class=clr></div>
<div class=act><a href=""><img src="/upload/course/000/000/006/5822e1629bbd5997.jpg" /></a> </div>
</div>
</li>
</ul>
</div>
</div>
<!-- 代碼部分end -->
</body>
</body>
</html>把代碼復(fù)制到本地運(yùn)用看看吧
