<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css水平下拉菜单_www.jb200.com</title>
<style type="text/css">
<!--
@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;
}
</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(" iehoverb"), "");
}
}
}
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>
