急需一个javascript的下拉菜单

你用下拉菜单做为关键词在javascript和主页制作区都能找到一大把，你的邮箱都装不了，嘻嘻~~~~~~~~~~~~~~~~~~
用层不好吗
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.menu {  font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #006699; border-color: #CCCCCC #666666 #666666 #CCCCCC; border-style: outset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; cursor: hand}
.menuonmouse { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #999999; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: inset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.menuonmouseout { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #999999; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: inset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.menuonmouseover { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #006699; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: outset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
</style>
</head><body bgcolor="#CCCCCC" text="#000000">
<div id="Layer1" style="position:absolute; left:10px; top:10px; width:41px; height:24px; z-index:1">
  <table cellspacing="4">
    <tr>
      <td nowrap id="menu1" class="menuonmouseout" onMouseOver="myover(this,menu01)" >菜单项一</td>
      <td nowrap id="menu2" class="menuonmouseout" onMouseOver="myover(this,menu02)" >菜单项二</td>
      <td nowrap id="menu3" class="menuonmouseout" onMouseOver="myover(this,menu03)" >菜单项三</td>
      <td nowrap id="menu4" class="menuonmouseout" onMouseOver="myover(this,menu04)" >菜单项四</td>
      <td nowrap id="menu5" class="menuonmouseout" onMouseOver="myover(this,menu05)" >菜单项五</td>
    </tr>
    <tr>
      <td align="center" valign="top">
        <div id="menu01" style=" visibility: hidden">
          <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)">
            <tr>
              <td nowrap class="menuonmouseout" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)">菜单项一.一</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)">菜单项一.二</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)">菜单项一.三</td>
            </tr>
          </table>
        </div>
      </td>
      <td align="center" valign="top">
        <div id="menu02" style=" visibility: hidden">
          <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu02)" onMouseOut="myout(this,menu02)">
            <tr>
              <td nowrap class="menuonmouseout" onMouseOver="myover(this,menu02)" onMouseOut="myout(this,menu02)">菜单项一.一</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu02)" onMouseOut="myout(this,menu02)">菜单项一.二</td>
            </tr>
          </table>
        </div>
      </td>
      <td align="center" valign="top">
        <div id="menu03" style=" visibility: hidden">
          <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">
            <tr>
              <td nowrap class="menuonmouseout" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">菜单项一.一</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">菜单项一.二</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">菜单项一.三</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">菜单项一.四</td>
            </tr>
          </table>
        </div>
      </td>
      <td valign="top" align="center">
        <div id="menu04" style=" visibility: hidden">
          <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">
            <tr>
              <td nowrap class="menuonmouseout" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">菜单项一.一</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">菜单项一.二</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">菜单项一.三</td>
            </tr>
          </table>
        </div>
      </td>
      <td align="center" valign="top">
        <div id="menu05" style=" visibility: hidden">
          <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu05)" onMouseOut="myout(this,menu05)">
            <tr>
              <td nowrap class="menuonmouseout" onMouseOver="myover(this,menu05)" onMouseOut="myout(this,menu05)">菜单项一.一</td>
            </tr>
            <tr>
              <td class="menuonmouseout" onMouseOver="myover(this,menu05)" onMouseOut="myout(this,menu05)">菜单项一.二</td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</div>
<p> </p>
</body>
</html>
<script>
function myover(obj,menu)
{
menu1.className = "menuonmouseout";//将所有一级菜单的样式设置为menuonmouseout;
menu2.className = "menuonmouseout";
menu3.className = "menuonmouseout";
menu4.className = "menuonmouseout";
menu5.className = "menuonmouseout"; obj.className = "menuonmouseover";//将当前菜单的样式设置为menuonmouseover； menu01.style.visibility = "hidden";//将所有二级菜单所在的图层隐藏；
menu02.style.visibility = "hidden";
menu03.style.visibility = "hidden";
menu04.style.visibility = "hidden";
menu05.style.visibility = "hidden"; menu.style.visibility = "visible";//将当前菜单所在图层设置为可见；
}
function myout(obj,menu)
{
obj.className = "menuonmouseout";//将当前菜单的样式设置为menuonmouseout;
menu.style.visibility = "hidden";//将当前菜单所在的图层隐藏；
}
</script>

调试易

急需一个javascript的下拉菜单

解决方案 »