好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

cssdivulli下拉菜单代码2_html/css_WEB-ITnose

转自http://www.fzl-web.com/news/www/JSJL/2008/144.html





CSS Menu - Horizontal

@import"dhtml-horiz.css";
-->
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 ;
}


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);



CSS Menu - Horizontal


Blog
Work +

Websites +

qrayg
qArcade
qLoM
qDT


Pen and Ink
Free Interfaces


Learn +

Fireworks +

aquaButton
aquaButton2
waterDrop
lightFX
lightFX2


CSS +

footerStick
spriteNav
@import




Info
Contact


查看更多关于cssdivulli下拉菜单代码2_html/css_WEB-ITnose的详细内容...

  阅读:33次