如何做二级菜单(JS)

来源:互联网 发布:安静 知乎 编辑:程序博客网 时间:2024/04/30 10:52

大家帮忙看下下面的代码,如何才能使鼠标移开时二级菜单消失,而且在显示二级菜单时如何才能使下面的TABLE位置不变,让二级菜单显示在第二个TABLE之上。帮忙修改!(本人只会JS和HTML,而且都是初级)

-----------------------------代码如下--------------------------


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script type="text/JavaScript">
<!--
function show()
{
 
  document.getElementById("13").style.display="none";
  document.getElementById("12").style.display="block";
  document.getElementById("shouji1").style.display="none";
  document.getElementById("shouji2").style.display="block";
  document.getElementById("youxi2").style.display="none";
  document.getElementById("youxi1").style.display="block";
 
}
function show1()
{
 
  document.getElementById("12").style.display="none";
  document.getElementById("13").style.display="block";
  document.getElementById("youxi1").style.display="none";
  document.getElementById("youxi2").style.display="block";
  document.getElementById("shouji2").style.display="none";
  document.getElementById("shouji1").style.display="block";
 
}
function closeshow()
{
  document.getElementById("12").style.display="none";
  document.getElementById("13").style.display="none";
}
//-->
</script>
<style type="text/css">
<!--
#Layer1 {
 position:absolute;
 left:508px;
 top:93px;
 width:43px;
 height:45px;
 z-index:1;
}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table  border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td  valign="top"><img src="shouji1.jpg" width="81" height="29" id="shouji1" onMouseover="show()"/><img id="shouji2" src="shouji2.jpg" width="80" height="30" style="display:none" />
        <div id="12" style="display:none">
         

<a href="#">1233</a>


         

<a href="#">123456</a>


      </div></td>
      <td valign="top" >

<img src="youxi1.jpg" name="youxi1" width="80" height="30" align="top" id="youxi1" onMouseover="show1()" /><img id="youxi2" src="youxi2.jpg" width="81" height="29" style="display:none"/>


        <div id="13" style="display:none" >
         

<a href="#">1233</a>


         

<a href="#">1234567</a>


      </div></td>
    </tr>
  </table>
  <table width="200" border="1" align="center">
    <tr>
      <td colspan="2">编辑区</td>
    </tr>
    <tr>
      <td>编辑区</td>
      <td>编辑区</td>
    </tr>
    <tr>
      <td>编辑区</td>
      <td>编辑区</td>
    </tr>
  </table>
</form>
</body>
</html>
--------------------------谢谢--------------------------

原创粉丝点击