<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>
沒有留言