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>商城左侧大分类导航菜单</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{ /*全部商品导航栏样式*/
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; /*鼠标停留在全部商品导航栏上面的样式*/
}
.hc_lnav .allbtn ul {
position:absolute;
background-color:#60a411; /*鼠标停留在全部商品导航栏上面下面菜单的样式*/
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里面的小图片，像各地名优茶旁边的图*/
.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{ /*菜单下面最右侧的样式*/
zoom:1;
color:#ffffff;
clear:both;
overflow:auto;
padding-top:4px
}
.hc_lnav .allbtn ul li dl a{ /*菜单下面最左侧的样式*/
line-height:22px;
float:left;
color:#d9e7ce;
margin-left:6px;
margin-right:6px;
}
.hc_lnav .allbtn ul li dt{ /*最右侧的分类dt样式*/
padding-left:10px;
width:30px;
float:left;
padding-top:1px
}
.hc_lnav .allbtn ul li dd{ /*最左侧的分类dt样式*/
line-height:22px;
width:150px;
float:left;
padding-top:2px
}
/*二级导航隐藏*/
.hc_lnav .allbtn ul li .pop{ /*二级导航隐藏的样式*/
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{ /*二级隐藏域最右侧的标签样式*/
padding-left:5px;
width:72px;
}
.hc_lnav .allbtn ul li .pop dd{ /*二级隐藏域左侧的商品样式标签*/
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{ /*一级隐藏域和二级隐藏域最右侧的字体样式颜色*/
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>各地名优茶</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="" 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="">联兴茶叶</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="/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="">经济自饮装</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="">经济自饮装</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="">经济自饮装</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
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
