Javascript+DIV+CSS实现下拉菜单

<html>
  <head>
    <title>下拉菜单示例</title>
    <script language="javascript">
        //当鼠标移到菜单选项的时候显示对应的DIV
        function show(menu)
        { 
            document.getElementById(menu).style.visibility="visible";
        }
        //当鼠标移出的时候隐藏所有的DIV
        function hide()
        {
            document.getElementById("menu1").style.visibility="hidden";
            document.getElementById("menu2").style.visibility="hidden";
            document.getElementById("menu3").style.visibility="hidden";
       }
    </script>
  </head>
  <body>
      <table>
         <tr bgcolor="#9999FF">
             <td width="80" onMouseMove="show('menu1')" onMouseOut="hide()">菜单一</td>
             <td width="80" onMouseMove="show('menu2')" onMouseOut="hide()">菜单二</td>
             <td width="80" onMouseMove="show('menu3')" onMouseOut="hide()">菜单三</td>
         </tr>
      </table>
	  <div id="menu1"  onMouseMove="show('menu1')" onMouseOut="hide()" style="background:#9999FF;position:absolute;left=12;top=38;width=80;visibility=hidden">
	      <span>子菜单一</span><br>
		  <span>子菜单二</span><br>
		  <span>子菜单三</span><br>
	  </div>
	 <div id="menu2" onMouseMove="show('menu2')" onMouseOut="hide()" style="background:#9999FF;position:absolute;left=95;top=38;width=80;visibility=hidden">
	       <span >子菜单一</span><br>
		   <span>子菜单二</span><br>
		   <span>子菜单三</span><br>
	  </div>
	 <div id="menu3"  onMouseMove="show('menu3')" onMouseOut="hide()" style="background:#9999FF;position:absolute;left=180;top=38;width=80;visibility=hidden">
	       <span >子菜单一</span><br>
		   <span>子菜单二</span><br>
		   <span>子菜单三</span><br>
	  </div>
  </body>
</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值