CSS常用菜单（三）

3、多级菜单

下面我们来实现如下图所示的多级菜单





html代码：



css代码：

<style type="text/css">

body

{

margin: 0;

padding: 30px;

background: #FFF;

color: #666;

behavior: url(../Scripts/csshover.htc);

}

h1

{

font: bold 16px;

}

p

{

font: 11px;

}

a

{

color: #900;

text-decoration: none;

}

a:hover

{

background: #900;

color: #FFF;

}

/*CSS Code for Menu Begin:*/

/* Root = Horizontal, Secondary = Vertical */

ul#navmenu

{

margin: 0;

border: 0 none;

padding: 0;

width: 500px; /*For KHTML*/

list-style: none;

height: 24px;

}

ul#navmenu li

{

margin: 0;

border: 0 none;

padding: 0;

float: left; /*For Gecko*/

display: inline;

list-style: none;

position: relative;

height: 24px;

}

ul#navmenu ul

{

margin: 0;

border: 0 none;

padding: 0;

width: 160px;

list-style: none;

display: none;

position: absolute;

top: 24px;

left: 0;

}

ul#navmenu ul li

{

float: none; /*For Gecko*/

display: block !important;

display: inline; /*For IE*/

}

/* Root Menu */

ul#navmenu a

{

border: 1px solid #FFF;

border-right-color: #CCC;

border-bottom-color: #CCC;

padding: 0 6px;

float: none !important; /*For Opera*/

float: left; /*For IE*/

display: block;

background: #EEE;

color: #666;

font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

height: auto !important;

height: 1%; /*For IE*/

}

/* Root Menu Hover Persistence */

ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a

{

background: #CCC;

color: #FFF;

}

/* 2nd Menu */

ul#navmenu li:hover li a, ul#navmenu li.iehover li a

{

float: none;

background: #EEE;

color: #666;

}

/* 2nd Menu Hover Persistence */

ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a

{

background: #CCC;

color: #FFF;

}

/* 3rd Menu */

ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a

{

background: #EEE;

color: #666;

}

/* 3rd Menu Hover Persistence */

ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a

{

background: #CCC;

color: #FFF;

}

/* 4th Menu */

ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a

{

background: #EEE;

color: #666;

}

/* 4th Menu Hover */

ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover

{

background: #CCC;

color: #FFF;

}

ul#navmenu ul ul, ul#navmenu ul ul ul

{

display: none;

position: absolute;

top: 0;

left: 160px;

}

/* Do Not Move - Must Come Before display:block for Gecko */

ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul

{

display: none;

}

ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul

{

display: block;

}

</style>