php左测导航栏,商城左侧大分类导航菜单教程完整代码

提示：本页面右侧代码编辑器中的代码纯属展示调试代码

本代码最终的效果请用下面的的完整代码，复制到本地运行

完整代码html>

商城左侧大分类导航菜单

*{

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

}

 全部商品分类 

•  各地名优茶 

  热门

  西湖龙井

  金骏眉

  大红袍

  铁观音

  名茶

  红茶

  绿茶

  乌龙茶

  黑茶

  白茶 

  各地名优茶

  绿茶

  西湖龙井

  龙井

  黄山毛峰

  安吉白茶

  其他绿茶

  乌龙茶

  铁观音

  大红袍

  水仙

  肉桂

  台湾乌龙

  其他乌龙茶

  红茶

  金骏眉

  正山小种

  祁门红茶

  坦洋工夫

  其他红茶

  政和工夫

  滇红工夫

  黑茶

  白沙溪黑茶

  普洱茶饼

  普洱沱茶

  普洱茶砖

  普洱散茶

  其他黑茶

  白茶

  白牡丹

  白毫银针

  寿眉

  其他白茶

  品牌

  滋恩

  远荣

  顶峰

  公泰

  一品堂

  好吉

  绿雪芽

  台湾梅山制茶

  白沙溪

  联兴茶叶

  价格

  100元及以下

  100-300元

  300元及以上

  净含量

  50g及以下

  51-100g

  101-250g

  250g以上

  包装

  经济自饮装

  精美礼品装

   
•  花草保健茶 

  推荐

  大麦茶

  苦荞茶

  玫瑰花茶

  雪菊

  蜂蜜木瓜粉

  花草保健茶

  瘦身

  玫瑰荷叶茶

  玄米茶

  兰香子

  纤维泡腾片

  青梅苹果酸

  三草茶

  美容

  法兰西玫瑰

  冻干柠檬片

  果粒茶

  大麦茶

  蜂蜜抹茶粉

  丰胸

  木瓜葛根粉

  蜂蜜木瓜粉

  红酒木瓜丽人饮

  品牌

  与花香

  美丽快攻

  顶峰

  价格

  100元及以下

  100-300元

  300元及以上

  净含量

  50g及以下

  51-100g

  101-250g

  250g以上

  包装

  经济自饮装

  精美礼品装
•  精选茶具 

  推荐

  功夫茶具

  个人杯

  茶宠

  茶叶罐

  精选茶具

  陶瓷

  茶叶罐

  功夫茶具

  茶壶

  茶宠

  茶杯

  茶具礼盒

  品牌

  恒越

  卓越

  国尊陶瓷

  宏远达

  福万利

  价格

  100元及以下

  100-300元

  300元及以上

  包装

  经济自饮装

  精美礼品装
•  可口茶食 

  推荐

  橄榄

  冰糖杨梅

  酸甜梅

  可口茶食

  干果

  杏仁

  瓜子

  开心果

  零食

  水晶柠檬片

  方块酥

  凤梨酥

  燕麦巧克力

  品牌

  赛园

  新味

  价格

  100元及以下

  100-300元

  300元及以上

  净含量

  50g及以下

  51-100g

  101-250g

  250g以上

  包装

  经济自饮装

  精美礼品装