The complete code of the large category navigation menu tutorial on the left side of the mall
Tips: The code in the code editor on the right side of this page is purely for display debugging code
For the final effect of this code, please use the complete code below and copy it to run locally
##Full code
<!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; /*鼠標停留在全部商品導(dǎo)航欄上面的樣式*/
}
.hc_lnav .allbtn ul {
position:absolute;
background-color:#60a411; /*鼠標停留在全部商品導(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{ /*每個商品大分類的樣式，*/
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; /*選項旁邊的圖片*/
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
}
/*二級導(dǎo)航隱藏*/
.hc_lnav .allbtn ul li .pop{ /*二級導(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 /*鼠標瀏覽二級隱藏域商品時的背景色*/
}
.hc_lnav .allbtn ul li .pop dl a{
color:#666666;
margin-left:12px; /*二級隱藏域商品鏈接a標簽的樣式*/
margin-right:12px
}
.hc_lnav .allbtn ul li .pop dt{ /*二級隱藏域最右側(cè)的標簽樣式*/
padding-left:5px;
width:72px;
}
.hc_lnav .allbtn ul li .pop dd{ /*二級隱藏域左側(cè)的商品樣式標簽*/
width:565px;
margin-left:-12px;
}
.hc_lnav .allbtn ul li .pop .act{ /*二級隱藏域下端的圖片*/
width:640px;
height:80px;
overflow:hidden;
padding-top:10px
}
.hc_lnav .allbtn:hover ul{ /*控制一級菜單顯示隱藏*/
display:block
}
.hc_lnav .allbtn ul li:hover{
background-color:#fcfcfc /*鼠標停留一級隱藏域的背景色*/
}
.hc_lnav .allbtn ul li:hover .tx{ /*鼠標停留一級隱藏域商品分類的的背景色*/
background-color:#f5f5f5
}
.hc_lnav .allbtn ul li:hover .tx a{ /*當鼠標停留在另一個a標簽上面的時候，上一個a標簽的顏色*/
color:#333333
}
.hc_lnav .allbtn ul li:hover .pop{ /*控制二級菜單顯示隱藏*/
display:block;
top:0px;
left:190px
}
.hc_lnav .allbtn ul li:hover dl{ /*一級隱藏域和二級隱藏域最右側(cè)的字體樣式顏色*/
color:#6e6e6e
}
.hc_lnav .allbtn ul li:hover a{
color:#666666
}
.hc_lnav .allbtn ul li:hover a:hover{ /*鼠標停留在商品上面的字體顏色*/
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="">臺灣烏龍</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="">遠榮</a>
<a href="">頂峰</a>
<a href="">公泰</a>
<a href="">一品堂</a>
<a href="">好吉</a>
<a href="">綠雪芽</a>
<a href="">臺灣梅山制茶</a>
<a href="" >白沙溪</a>
<a href="">聯(lián)興茶葉</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="">經(jīng)濟自飲裝</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>價格</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)濟自飲裝</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="">個人杯</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="">宏遠達</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="">經(jīng)濟自飲裝</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>價格</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)濟自飲裝</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>Copy the code to local application and have a look
