转自http://www.fzl-web.com/news/www/JSJL/2008/144.html
CSS Menu - Horizontal title >
body {
margin : 0 ;
padding : 30px ;
background : #FFF ;
color : #666 ;
}
h1 {
font : bold 16px Arial, Helvetica, sans-serif ;
}
p {
font : 11px Arial, Helvetica, sans-serif ;
}
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 >
navHover = function () {
var lis = document.getElementById( " navmenu " ).getElementsByTagName( " LI " );
for ( var i = 0 ; i lis[i].onmouseover = function () {
this .className += " iehover " ;
}
lis[i].onmouseout = function () {
this .className = this .className.replace( new RegExp( " iehover\\b " ), "" );
}
}
}
if (window.attachEvent) window.attachEvent( " onload " , navHover);
script >
head >
CSS Menu - Horizontal h1 >
Blog a > li >
Work + a >
Websites + a >
qrayg a > li >
qArcade a > li >
qLoM a > li >
qDT a > li >
ul >
li >
Pen and Ink a > li >
Free Interfaces a > li >
ul >
li >
Learn + a >
Fireworks + font > a >
aquaButton a > li >
aquaButton2 a > li >
waterDrop a > li >
lightFX a > li >
lightFX2 a > li >
ul >
li >
CSS + a >
footerStick a > li >
spriteNav a > li >
@import a > li >
ul >
li >
ul >
li >
Info a > li >
Contact a > li >
ul >
body >
html >
