CSS多级下拉菜单

纯CSS实现，简单、方便，缺点是扩展性不够好，增加一层菜单时有点麻烦。

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" />
< title > CSS多级下拉菜单 </ title >
< style > ...
.menu{...}{
text-align:left;
color:#FFF;
font-family:幼圆;/**//*菜单字体*/
height:26px;
width:100%
}

.menuul.menuBar{...}{
list-style:none;
margin:0px;
font-size:12pt;/**//*一级菜单字体大小*/
}

.menuul.menuBarli{...}{
float:left;
display:block;
position:relative;/**//*关键*/
margin-right:2px;/**//*一级菜单间距*/
}

.menuul.menuBarlia.menuLink{...}{/**//*一级菜单正常样式*/
display:block;
width:125px;
height:26px;
color:#FFF;
text-decoration:none;
background-color:#90BA18;
text-align:center;
line-height:26px;
}

.menuul.menuBarli:hovera.menuLink{...}{/**//*鼠标移到一级菜单时的样式*/
background-color:#B2DE31;
color:#000;
}

.menuul.menuBarliul,/**//*隐藏二级菜单*/
.menuul.menuBarli:hoverul.subMenu3,/**//*隐藏三级菜单*/
.menuul.menuBarli:hoverulli:hoverul.subMenu4{...}{/**//*隐藏四级菜单*/
margin:0;
display:none;
}

.menuul.menuBarliullia.m2Link,/**//*二级菜单正常样式*/
.menuul.menuBarliulli:hoverullia.m3Link,/**//*三级菜单正常样式*/
.menuul.menuBarliulliulli:hoverullia.m4Link{...}{/**//*四级菜单正常样式*/
text-decoration:none;
color:#000;
display:block;
text-align:center;
width:124px;
background-color:#EBFEAC;
margin-top:1px;/**//*子菜单行间距*/
}

.menuul.menuBarliulli:hovera.m2Link,/**//*鼠标移到二级菜单时的样式*/
.menuul.menuBarliulliulli:hovera.m3Link,/**//*鼠标移到三级菜单时的样式*/
.menuul.menuBarliulliulliulli:hovera.m4Link{...}{/**//*鼠标移到四级菜单时的样式*/
background-color:#D3F666;
color:#000;
}

.menuul.menuBarli:hoverul{...}{/**//*显示二级菜单*/
position:absolute;
display:block;
width:124px;
font-size:11pt;/**//*二级及其下级菜单字体大小*/
background-color:#FFF;/**//*菜单行间显示的颜色*/
left:1px;
}

.menuul.menuBarliulli:hoverul.subMenu3,/**//*显示三级菜单*/
.menuul.menuBarliulli:hoverulli:hoverul.subMenu4{...}{/**//*显示四级菜单*/
padding-left:1px;/**//*每级菜单的间距*/
display:block;
position:absolute;/**//*相对父菜单定位*/
left:124px;/**//*该数值根据菜单宽度设置*/
top:0px;
}
</ style >
</ head >

< body >
< div class ="menu" >
< ul class ="menuBar" >
< li >< a href ="#" class ="menuLink" > 测试菜单 </ a ></ li >
< ul >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >
< a href ="#" class ="m2Link" > 测试菜单&#62; </ a >
< ul class ="subMenu3" >
< li >
< a href ="#" class ="m3Link" > 子菜单3&#62; </ a >
< ul class ="subMenu4" >
< li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li >
< li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li >
< li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li >
< li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li >
< li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li >
< li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" class ="menuLink" > 测试菜单 </ a ></ li >
< ul >
< li >
< a href ="#" class ="m2Link" > 测试菜单&#62; </ a >
< ul class ="subMenu3" >
< li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li >
< li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li >
< li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li >
< li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" class ="menuLink" > 测试菜单 </ a ></ li >
< ul >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" class ="menuLink" > 测试菜单 </ a ></ li >
< ul >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
< li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li >
</ ul >
</ li >
</ ul >
</ div >
</ body >
</ html >