JS+CSS 制作的超级简单的下拉菜单附图

更新时间：2013年11月22日 17:04:52 作者：

下拉菜单想必大家都有见到过吧，在本文将为大家介绍个不错的示例，超简单的，大家可以参考下哦

先看效果：

代码：

 
<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 style="vertical-align:top;"> 
<span class="menu" id="Menu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')" >Menu1</span> 
<br /> 
<div id="SubMenu1" style="display:none" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')"> 
<span class="submenu">SubMenu1</span><br /> 
<span class="submenu">SubMenu2</span><br /> 
<span class="submenu">SubMenu3</span><br /> 
<span class="submenu">SubMenu4</span> 
</div> 
</td> 
<td style="vertical-align:top;"> 
<span class="menu" id="Menu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">Menu2</span> 
<br /> 
<div id="SubMenu2" style="display:none" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')"> 
<span class="submenu">SubMenu1</span><br /> 
<span class="submenu">SubMenu2</span><br /> 
<span class="submenu">SubMenu3</span><br /> 
<span class="submenu">SubMenu4</span> 
</div> 
</td> 
<td style="vertical-align:top;"> 
<span class="menu" id="Menu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">Menu3</span> 
<br /> 
<div id="SubMenu3" style="display:none" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')"> 
<span class="submenu">SubMenu1</span><br /> 
<span class="submenu">SubMenu2</span><br /> 
<span class="submenu">SubMenu3</span><br /> 
<span class="submenu">SubMenu4</span> 
</div> 
</td> 
<td style="vertical-align:top;"> 
<span class="menu" id="Menu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">Menu4</span> 
<br /> 
<div id="SubMenu4" style="display:none" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')"> 
<span class="submenu">SubMenu1</span><br /> 
<span class="submenu">SubMenu2</span><br /> 
<span class="submenu">SubMenu3</span><br /> 
<span class="submenu">SubMenu4</span> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html> 

您可能感兴趣的文章:

小程序实现选择题选择效果
这篇文章主要为大家详细介绍了小程序实现选择题选择效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
在实例中重学JavaScript事件循环
这篇文章主要介绍了在实例中重学JavaScript事件循环，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-12-12
原生js获取浏览器窗口及元素宽高常用方法集合
本文主要介绍了原生js获取浏览器窗口及元素宽高常用方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript实现网络测速的方法详解
在我们的日常生活中离不开网络，而网络的快慢直接决定了用户的产品使用体验。本文就来带大家了解如何用JavaScript实现网络测速，需要的可以参考一下
2023-01-01
基于JavaScript实现窗口拖动效果
这篇文章主要介绍了基于JavaScript实现窗口拖动效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
Javascript中正则表达式的应用详解
这篇文章主要为大家详细介绍了Javascript中正则表达式的应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
对table和ul实现js分页示例分享
本文主要介绍了js对table和ul li实现前台分页,需要的朋友可以参考下
2014-02-02
文本框回车提交与禁止提交示例
文本框输入数据后使用回车进行提交，想必大家都尝试过吧，在本文有个不错的示例，喜欢的朋友可以参下
2013-09-09
javascript前端实现多视频上传
这篇文章主要为大家详细介绍了javascript前端实现多视频上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
JS回调函数 callback的理解与使用案例分析
这篇文章主要介绍了JS回调函数 callback的理解与使用,结合具体案例形式分析了javascript回调函数的功能、原理、用法及相关操作注意事项,需要的朋友可以参考下
2019-09-09