HTML菜单栏样式与JavaScript交互-优快云博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>menu009</title>
<style type="text/css">
body {
margin:0;
padding:0;}

ul#menu009{
margin:0;
padding:0;
list-style-type:none;
width:auto;
font-size:12px;
height:36px;
font-family:Tahoma, Verdana, Arial, Helvetica;
position:relative;
display:block;
font-weight:bold;
background:url("bkg_off.gif") repeat-x left top;
border-bottom:5px solid #64812a;
border-top:1px solid #cbd77e;
}

ul#menu009 li{
display:block;
float:left;
margin:0;
padding:0;}

ul#menu009 li a{
display:block;
float:left;
color:#486215;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
background:url("separator.gif") no-repeat right top;}

ul#menu009 li a:hover{
background:url("bkg_on.gif") no-repeat right top;
color:white;
}

ul#menu009 li a.current{
color:#486215;
background:url("separator.gif") no-repeat right top;}
.z1 {
color:#fff;
background-color:#64812a;
font-family:Tahoma, Verdana, Arial, Helvetica;
font-size:11px; padding-bottom:3px;
height:30;
}
.z2 {
color:#fff;
background-color:#64812a;
font-family:Tahoma, Verdana, Arial, Helvetica;
font-size:11px; padding-bottom:3px;
height:20;
}
.z3 {
color:white;

font-family:Tahoma, Verdana, Arial, Helvetica;
font-size:11px;

font-weight:bold;
padding:20 20 40 20;
}
.z3 ul li
{
  float:left;
  padding:0px 0 0 38px;
  background-color:#64812a;

}

body a
{
color:white;
text-decoration:none;
}
body a:hover
{
color:red;
font-family:serif;
font-weight:bold;
font-size:15px;
text-decoration:underline;
}

</style>
<script language="javascript">
var   x=0;
window.onload=function()
{
        var   ii,i,a,s="";
        var   x=2,y=3;
        var   d=document.getElementsByTagName("DIV");
        for(ii=0;ii <d.length;ii++)
        {
           if(d[ii].id=="top")
            {
          a=d[ii].getElementsByTagName("li");
               for(i=0;i <a.length;i++)
                {
               //a[i].onmouseover=function(){show(i)}; //此处的i是一个变量,在运行show取i的值,很显示你的i每次都会最终变成a.length
               a[i].onmouseover=new Function("show1('"+"cz"+i+"'"+","+"'"+i*50+"')"); //这里的i是一个常量,就是此刻i是值
                a[i].onmouseout=new Function("hidden1('"+"cz"+i+"')"); //这里的i是一个常量,就是此刻i是值
                }
        }
      }

}
function showf(name)
{
var d=document.getElementById(name);
d.style.display="";
}
function hiddenf(name)
{
var d=document.getElementById(name);
d.style.display="none";
}
function show1(va,loc)
{
var d=document.getElementById(va);
d.onmousemove=function(){showf(va)};
d.onmouseout=function(){hiddenf(va)};
d.style.display="";
d.style.top = 37;
d.style.left=parseInt(loc);
}
function hidden1(va)
{
var d=document.getElementById(va);
d.style.display="none";
}
</script>
</head>

<body>
<div id="top">
<ul id="menu009">
<li><a href="#" >Home</a></li>
<li ><a href="#">Products</a></li>
<li><a href="#" >Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">How to</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
</ul><%--,ul#menu009 li a.current:hover--%>
</div>

<div class="z3" style="position:absolute;display:none" id="cz1">
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASDcz1</a></li>
</ul>
</div>
<div class="z3" style="position:absolute;display:none" id="cz2">
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASDcz2</a></li>
</ul>
</div>
<div class="z3" style="position:absolute;display:none;width:491" id="cz3" >
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASDcz3</a></li>
</ul>
</div>
<div class="z3" style="position:absolute;display:none;" id="cz4">
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASDcz4</a></li>
</ul>
</div>
<div class="z3" style="position:absolute;display:none" id="cz5">
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASDcz5</a></li>
</ul>
</div>
<div class="z3" style="position:absolute;display:none" id="cz6">
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASDcz6</a></li>
</ul>
</div>
<div class="z3" style="position:absolute;display:none" id="cz7">
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASDcz7</a></li>
</ul>
</div>

<div class="z3" style="position:absolute;display:none" id="cz8">
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASDcz8</a></li>
</ul>
</div>

<div class="z3" style="position:absolute;display:none" id="z9">
<ul>
<li><a href="#">数据类型</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">PNG图标</a></li>
<li><a href="#">SDFASD9</a></li>
</ul>
</div>
</body>
</html>

css做的菜單