先看效果：
代码：
复制代码 代码如下:
<html>
<head>
<title>Good Test</title>
<script>
function showSubMenu(SubMenu) {
document.getElementById(SubMenu).style.display = "inline";
}
function HideSubMenu(SubMenu) {
document.getElementById(SubMenu).style.display = "none";
}
</script>
<style>
.menu{
margin:1px 1px 1px 1px;
padding:3px 5px 3px 5px;
background-color:#8080C0;
color:white;
}
.submenu {
margin:1px 1px 1px 1px;
padding:3px 5px 3px 5px;
background-color:#8080C0;
color:white;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>
<span id="Menu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')" >Menu1</span>
<br />
<div id="SubMenu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')">
<span>SubMenu1</span><br />
<span>SubMenu2</span><br />
<span>SubMenu3</span><br />
<span>SubMenu4</span>
</div>
</td>
<td>
<span id="Menu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">Menu2</span>
<br />
<div id="SubMenu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">
<span>SubMenu1</span><br />
<span>SubMenu2</span><br />
<span>SubMenu3</span><br />
<span>SubMenu4</span>
</div>
</td>
<td>
<span id="Menu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">Menu3</span>
<br />
<div id="SubMenu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">
<span>SubMenu1</span><br />
<span>SubMenu2</span><br />
<span>SubMenu3</span><br />
<span>SubMenu4</span>
</div>
</td>
<td>
<span id="Menu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">Menu4</span>
<br />
<div id="SubMenu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">
<span>SubMenu1</span><br />
<span>SubMenu2</span><br />
<span>SubMenu3</span><br />
<span>SubMenu4</span>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
【JS+CSS 制作的超级简单的下拉菜单附图】相关文章：
★ 动态提示的下拉框
★ 理解javascript定时器中的setTimeout与setInterval
★ 下拉菜单