鼠标悬停菜单弹出下拉子菜单 JavaScript 代码示例
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停菜单弹出下拉子菜单</title>
<script type="text/javascript">
<pre><code>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";
}
function showSubMenu(parent, submenu){
hide();
document.getElementById(parent).style.visibility="visible";
document.getElementById(submenu).style.visibility="visible";
}
</script>
</code></pre>
</head>
<body>
<table>
<tr bgcolor="#9999FF">
<td width="80" onMouseMove="showSubMenu('menu1', 'submenu1')" onMouseOut="hide()">菜单一</td>
<td width="80" onMouseMove="showSubMenu('menu2', 'submenu2')" onMouseOut="hide()" >菜单二</td>
<td width="80" onMouseMove="showSubMenu('menu3', 'submenu3')" onMouseOut="hide()">菜单三</td>
</tr>
</table>
<div id="menu1" style="background:#9999FF;position:absolute;left:12px;top:38px;width:80px;visibility:hidden;">
<span>蒸羊羔</span><br>
<span>蒸熊掌</span><br>
<span onMouseMove="show('submenu1')">蒸鹿尾儿</span><br>
</div>
<div id="menu2" style="background:#9999FF;position:absolute;left:95px;top:38px;width:80px;visibility:hidden">
<span>烧花鸭</span><br>
<span>烧雏鸡</span><br>
<span onMouseMove="show('submenu2')">烧子鹅</span><br>
</div>
<div id="menu3" style="background:#9999FF;position:absolute;left:180px;top:38px;width:80px;visibility:hidden;">
<span>熘鲜蘑</span><br>
<span>熘鱼脯</span><br>
<span onMouseMove="show('submenu3')">熘鱼肚</span><br>
</div>
<div id="submenu1" style="background:#9999FF;position:absolute;left:92px;top:38px;width:80px;visibility:hidden;">
<span>鹿尾儿1</span><br>
<span>鹿尾儿2</span><br>
<span>鹿尾儿3</span><br>
</div>
<div id="submenu2" style="background:#9999FF;position:absolute;left:175px;top:38px;width:80px;visibility:hidden;">
<span>子鹅1</span><br>
<span>子鹅2</span><br>
<span>子鹅3</span><br>
</div>
<div id="submenu3" style="background:#9999FF;position:absolute;left:260px;top:38px;width:80px;visibility:hidden;">
<span>鱼肚1</span><br>
<span>鱼肚2</span><br>
<span>鱼肚3</span><br>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/obKZ 著作权归作者所有。请勿转载和采集!