一、实现的功能：
鼠标移至菜单项，显示子菜单；
鼠标移开菜单项，隐藏子菜单。
二、实现原理简述：
菜单及子菜单项位于同一容器中（我用了<td>），各子容器为<div>（每一行内容放在一个div中）；
鼠标进入<td>事件，显示子菜单<div>，鼠标离开<td>，隐藏子菜单。
三、部分代码：
HTML布局部分
<table align="center">
<tr>
<td onMouseOver="fun1()" onMouseOut="fun2()">
<div id="index">
菜单
</div>
<div id="info1" style="display:none" onMouseOver="fun3()" onMouseOut="fun4()">
菜单项1
</div>
<div id="info2" style="display:none" onMouseOver="fun5()" onMouseOut="fun6()">
菜单项2
</div>
</td>
</tr>
</table>
JS脚本部分
<script>
function fun1()
{
document.getElementById(‘index‘).style.backgroundColor="#FFF0F5";
document.getElementById(‘info1‘).style.display=‘block‘;
document.getElementById(‘info2‘).style.display=‘block‘;
}
function fun2()
{
document.getElementById(‘index‘).style.backgroundColor="#FFF";
document.getElementById(‘info1‘).style.display=‘none‘;
document.getElementById(‘info2‘).style.display=‘none‘;
}
function fun3()
{
document.getElementById(‘info1‘).style.backgroundColor="#FFFAF0";
}
function fun4()
{
document.getElementById(‘info1‘).style.backgroundColor="#FFF";
}
function fun5()
{
document.getElementById(‘info2‘).style.backgroundColor="#FFFAF0";
}
function fun6()
{
document.getElementById(‘info2‘).style.backgroundColor="#FFF";
}
</script>
原文：https://www.cnblogs.com/aloneYu/p/11820379.html