本文提供了一个使用HTML和JavaScript实现的简单下拉菜单示例。该示例通过鼠标悬停事件展示和隐藏不同颜色背景的子菜单选项。
<html>
<head>
<title>下拉菜单示例</title>
<script language="javascript">
function show(menu){
document.getElementById(menu).style.visibility="visible";
}
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="#999ff">
<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-color:#00FF00; 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-color:#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-color:#FF0000; position:absolute; left=180;top=38;width=80; visibility=hidden;">
<span>子菜单一</span><br />
<span>子菜单二</span><br />
<span>子菜单三</span><br />
</div>
</body>
</html>
扫一扫
1170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
