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>