代码如下:
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);