<!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>二级向下弹出菜单</title>
<style type="text/css">
.menu {
font-family: arial, sans-serif;
width:210px;
margin:0;
margin:50px 0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
.menu ul li div {
display: none;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li div li a {
display:block;
background:#faeec7;
color:#000;
}
.menu ul li div li a:hover {
background:#dfc184;
color:#000;
}
.clear{
height:0;
font-size:0;
line-height:0;
clear:both;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(nav);
function nav(){
var navlist=document.getElementById("nav");
var navtab=navlist.getElementsByTagName("a");
var navtdiv=navlist.getElementsByTagName("div");
for(i=0;i<navtab.length;i++){
if(navtab[i].className.indexOf("hide")== -1) continue;
navtab[i].onmouseover=function(){
for(j=0;j<navtdiv.length;j++)
{
navtdiv[j].style.display="none";
navtdiv[j].onmouseover=function(){this.style.display="block";}
navtdiv[j].onmouseout=function(){this.style.display="none";}
}
get_nextSibling(this).style.display="block";
}
navtab[i].onmouseout=function(){get_nextSibling(this).style.display="none";}
}
}
function get_nextSibling(n){
var x=n.nextSibling;
while (x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
</script>
</head>
<body>
<div class="menu">
<ul id="nav">
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<div>
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
</div>
</li>
<li><a class="hide" href="index.html">MENUS</a>
<div>
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
</ul>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>