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

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

完整代码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

}