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>