CSS绿色水平多级下拉菜单

演示效果截图

CSS代码

<style>
.menu {
text-align:left;
color:#FFF;
font-family:幼圆; /*菜单字体*/
height:26px;
width:100%}
.menu ul.menuBar{
list-style:none;
margin:0px;
font-size:12pt; /*一级菜单字体大小*/}
.menu ul.menuBar li{
float:left;
display:block;
position:relative; /*关键*/
margin-right:2px; /*一级菜单间距*/}    
.menu ul.menuBar li a.menuLink{/*一级菜单正常样式*/
display:block;
width:125px;
height:26px;
color:#FFF;
text-decoration:none;
background-color:#90BA18;
text-align:center;
line-height:26px;}
.menu ul.menuBar li:hover a.menuLink{
/*鼠标移到一级菜单时的样式*/
background-color:#B2DE31;
color:#000;}
.menu ul.menuBar li ul,/*隐藏二级菜单*/
.menu ul.menuBar li:hover ul.subMenu3,
/*隐藏三级菜单*/
.menu ul.menuBar li:hover ul li:hover ul.subMenu4 {
/*隐藏四级菜单*/
margin:0;
display:none;}
.menu ul.menuBar li ul li a.m2Link,
/*二级菜单正常样式*/
.menu ul.menuBar li ul li:hover ul li a.m3Link,
/*三级菜单正常样式*/
.menu ul.menuBar li ul li ul li:hover ul li a.m4Link{
/*四级菜单正常样式*/
text-decoration:none;
color:#000;
display:block;
text-align:center;
width:124px;
background-color:#EBFEAC;
margin-top:1px; /*子菜单行间距*/}
.menu ul.menuBar li ul li:hover a.m2Link,
/*鼠标移到二级菜单时的样式*/
.menu ul.menuBar li ul li ul li:hover a.m3Link,
/*鼠标移到三级菜单时的样式*/
.menu ul.menuBar li ul li ul li ul li:hover a.m4Link{
/*鼠标移到四级菜单时的样式*/
background-color:#D3F666;
color:#000;}
.menu ul.menuBar li:hover ul{ 
/*显示二级菜单*/
position:absolute;
display:block;
width:124px;
font-size:11pt;
/*二级及其下级菜单字体大小*/
background-color:#FFF;
/*菜单行间显示的颜色*/
left:1px;}
.menu ul.menuBar li ul li:hover ul.subMenu3,
/*显示三级菜单*/
.menu ul.menuBar li ul li:hover ul li:hover ul.subMenu4{
/*显示四级菜单*/
padding-left:1px; /*每级菜单的间距*/
display:block;
position:absolute; /*相对父菜单定位*/
left:124px; /*该数值根据菜单宽度设置*/
top:0px;}
</style>

HTML代码

<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">www.865171.cn</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>
</ul>
</div>