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;
}
效果如下（斜體部分為在菜單四的基礎上增加的）：
