代码如下:
<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.ynpxrz.com/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns=http://www.ynpxrz.com/1999/xhtml>
<head>
<meta http-equiv=content-type content=text/html; charset=utf-8 />
<title>css menu - horizontal</title>
<style type=text/css>
<!--
@importdhtml-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;
}
</style>
<script type=text/javascript>
navhover = function() {
var lis = document.getelementbyid(navmenu).getelementsbytagname(li);
for (var i=0; i<lis.length; 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>
<body>
<h1>css menu - horizontal</h1>
<hr />
<ul id=navmenu>
<li><a href=#>blog</a></li>
<li><a href=#>work +</a>
<ul>
<li><a href=#>websites +</a>
<ul>
<li><a href=#>qrayg</a></li>
<li><a href=#>qarcade</a></li>
<li><a href=#>qlom</a></li>
<li><a href=#>qdt</a></li>
</ul>
</li>
<li><a href=#>pen and ink</a></li>
<li><a href=#>free interfaces</a></li>
</ul>
</li>
<li><a href=#>learn +</a>
<ul>
<li><a href=#>fireworks +</a>
<ul>
<li><a href=#>aquabutton</a></li>
<li><a href=#>aquabutton2</a></li>
<li><a href=#>waterdrop</a></li>
<li><a href=#>lightfx</a></li>
<li><a href=#>lightfx2</a></li>
</ul>
</li>
<li><a href=#>css +</a>
<ul>
<li><a href=#>footerstick</a></li>
<li><a href=#>spritenav</a></li>
<li><a href=#>@import</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=#>info</a></li>
<li><a href=#>contact</a></li>
</ul>
</body>
</html>