多级菜单

1 二级菜单：

*{
padding: 0;
margin: 0;
}//（斜体部分为在菜单一的基础上增加的）
.menu li{
float: left;
position: relative;
list-style: none;
width: 100px;
height: 40px;
}
.menu a{
width: 100px;
height: 40px;
background: #2288DD;
color: antiquewhite;
display: block;
text-align: center;
line-height: 40px;
}
.menu a:hover{
background: #8A2BE2;
color: white;
}
.sec li:hover{
background: #8A2BE2;
color: white;
}
.sec{
color: yellowgreen;
width: 100px;
height: 80px;
background: #CECECE;
visibility: hidden;
position: absolute;
left: 0;
top: 40px;
}
.menu li a:hover .sec{
visibility: visible;
}

以上是CSS的样式，重点在于.menu a和.menu li的样式，一开始将定位放在.menu a里面代码能更简洁一点但是不利于下一级菜单的编写
html代码：
菜单一
二级菜单一
二级菜单二
菜单二
二级菜单一
二级菜单二
菜单三
二级菜单一
二级菜单二
菜单四
二级菜单一
二级菜单二
显示效果如下
[图片上传中。。。（1）]

2 三级菜单：

*{
padding: 0;
margin: 0;
}
.menu li{
width: 100px;
height: 40px;
list-style: none;
position: relative;
float: left;
}
.menu a{
width: 100px;
height: 40px;
background: #2288DD;
color: antiquewhite;
display: block;
text-align: center;
line-height: 40px;
}
/*.menu li {/*水平菜单*/
/*  float:left;
list-style:none;
position:relative;/*把包含块移动li元素*/
/*  width: 100px;
}
.menu a {
display:block;
height:40px;
width:100px;
line-height:40px;
background:#a9ea00;
color:#ff8040;
text-decoration:none;
text-align:center;
overflow:hidden;/*★★★★
}*/
.menu a:hover{
background: #8A2BE2;
color: white;
}
.sec li:hover{
background: #8A2BE2;
color: white;
}
.sec{
color: yellowgreen;
width: 100px;
height: 80px;
background: #CECECE;
visibility: hidden;
position: absolute;
left: 0;
top: 40px;
}
*.thr{*
*width: 100px;*
*height: 160px;*
*position: absolute;*
*left: 100px;*
*top: 0;*
*background: #DC143C;*
*visibility: hidden;*
*}*
*.thr li{*
*width: 100px;*
*height: 40px;*
*}*
*.sec li:hover .thr{*
*visibility: visible;*
*}*
.menu li a:hover .sec{
visibility: visible;
}

三级菜单效果如下（斜体部分为在菜单二的基础上增加的）

3 四级菜单：

*{
padding: 0;
margin: 0;
}
.menu li{
width: 100px;
height: 40px;
list-style: none;
position: relative;
float: left;
}
.menu a{
width: 100px;
height: 40px;
background: #2288DD;
color: antiquewhite;
display: block;
text-align: center;
line-height: 40px;
}
.menu a:hover{
background: #8A2BE2;
color: white;
}
.sec li:hover{
background: #8A2BE2;
color: white;
}
.sec{
color: yellowgreen;
width: 100px;
height: 80px;
background: #CECECE;
visibility: hidden;
position: absolute;
left: 0;
top: 40px;
}
.thr{
width: 100px;
height: 160px;
position: absolute;
left: 100px;
top: 0;
background: #DC143C;
visibility: hidden;
}
.thr li{
width: 100px;
height: 40px;
}
*.for{*
*width: 100px;*
*height: 80px;*
*position: absolute;*
*left: 100px;*
*top: 0;*
*visibility: hidden;*
*background: #CECECE;*
*color: red;*
*}*
*.for li{*
*width: 100px;*
*height: 40px;*
*}*
.sec li:hover .thr{
visibility: visible;
}
.menu li a:hover .sec{
visibility: visible;
}
*.thr li:hover .for{*
*visibility: visible;*
*}*

效果如下（（斜体部分为在菜单三的基础上增加的））：

4 五级菜单：

*{
padding: 0;
margin: 0;
}
.menu li{
width: 100px;
height: 40px;
list-style: none;
position: relative;
float: left;
}
.menu a{
width: 100px;
height: 40px;
background: #2288DD;
color: antiquewhite;
display: block;
text-align: center;
line-height: 40px;
}
.menu a:hover{
background: #8A2BE2;
color: white;
}
.sec li:hover{
background: #8A2BE2;
color: white;
}
.sec{
color: yellowgreen;
width: 100px;
height: 80px;
background: #CECECE;
visibility: hidden;
position: absolute;
left: 0;
top: 40px;
}
.thr{
width: 100px;
height: 160px;
position: absolute;
left: 100px;
top: 0;
background: #DC143C;
visibility: hidden;
}
.thr li{
width: 100px;
height: 40px;
}
.for{
width: 100px;
height: 80px;
position: absolute;
left: 100px;
top: 0;
visibility: hidden;
background: #CECECE;
color: red;
}
.for li{
width: 100px;
height: 40px;
}
*.fifth{*
*width: 100px;*
*height: 120px;*
*position: absolute;*
*left: 100px;*
*top: 0;*
*visibility: hidden;*
*background: lightskyblue;*
*color: #2F2F2F;*
*}*
*.fifth li{*
*width: 100px;*
*height: 40px;*
*}*
.sec li:hover .thr{
visibility: visible;
}
.menu li a:hover .sec{
visibility: visible;
}
.thr li:hover .for{
visibility: visible;
}
.for li:hover .fifth{
visibility: visible;
}

效果如下（斜体部分为在菜单四的基础上增加的）：

推荐阅读更多精彩内容