HTML+JS实现的简单菜单效果

一、实现的功能：

　　鼠标移至菜单项，显示子菜单；

　　

　　鼠标移开菜单项，隐藏子菜单。

　　

二、实现原理简述：

　　菜单及子菜单项位于同一容器中（我用了<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>