在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="content-type" content="texthtml;charset=utf-8">

	<title>Menu</title>

	<style type="text/css">

	    #nav

	    {

	    	list-style: none;

	    	text-align: center;

	    }

	    #nav li

	    {

	    	float: left;

	    	width: 100px;

	    	color: white;

	    	background-color: #3E3E3E;

	    }

	    #menu

	    {

	    	list-style: none;

	        padding: 5px;

	    	display: none;

	    	margin-left: -5px;

	    	margin-top: -5px;

	    }

	    #menu li

	    {

	    	background-color: #ccc;

	    	width: 100px;

	    	text-align: left;

	    	padding-left: 10px;

	    }

	    #menu li a:link

	    {

	    	text-decoration: none;

	    	display: block;

	    }

	    #menu li a:hover

	    {

	    	background-color:#3E3E3E;

	    	color: white

	    }

	</style>

</head>

<body>

	<ul id="nav">

		<li class="child">数 据 库

			<ul id="menu">

				<li><a href="http://blog.csdn.net/u011043843">MySQL</a></li>

				<li><a href="http://blog.csdn.net/u011043843">SQL Server</a></li>

				<li><a href="http://blog.csdn.net/u011043843">Oracle</a></li>

				<li><a href="http://blog.csdn.net/u011043843">DB2</a></li>

			</ul>

		</li>

		<li class="child">前台脚本

			<ul id="menu">

				<li><a href="http://blog.csdn.net/u011043843">JavaScript</a></li>

				<li><a href="http://blog.csdn.net/u011043843">Ruby</a></li>

				<li><a href="http://blog.csdn.net/u011043843">HTML</a></li>

				<li><a href="http://blog.csdn.net/u011043843">Python</a></li>

			</ul>

		</li>

		<li class="child">后台脚本

			<ul id="menu">

				<li><a href="http://blog.csdn.net/u011043843">PHP</a></li>

				<li><a href="http://blog.csdn.net/u011043843">ASP</a></li>

				<li><a href="http://blog.csdn.net/u011043843">ASP.NET</a></li>

				<li><a href="http://blog.csdn.net/u011043843">JSP</a></li>

			</ul>

		</li>

	</ul>

	<script type="text/javascript">

		var lis = document.getElementById("nav").getElementsByTagName('li');

		var i = 0;

		for( i = 0; i < lis.length; i++)

		{

			if(lis[i].className == "child")

			{

				lis[i].onmouseover = function()

				{

					var ulObj1 = this.getElementsByTagName('ul')[0];

					ulObj1.style.display = "block";

					this.style.backgroundColor="#ccc";

					this.style.color="black";

				}

			}

				lis[i].onmouseout = function()

				{

					var ulObj1 = this.getElementsByTagName('ul')[0]; //this是HTMLElement对象

					ulObj1.style.display = "none";

					this.style.backgroundColor="#3E3E3E";

					this.style.color="white";

				}

		}

	</script>

</body>

</html></span>

Javascript实现简单的下拉二级菜单的更多相关文章

  1. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

  2. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  3. DEDECMS v5.7 完美实现导航条下拉二级菜单

    一.引言 好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按照我的步骤走!记住一步也不能错哦! 二.实现过程 1.首先: 将下面这段代码贴到templets\def ...

  4. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  5. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  6. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  7. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  8. 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  9. 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

随机推荐

  1. 通用的contain函数

    用来检测节点所属关系:document.documentElement.contains(document.body) function contains(refNode, otherNode) {i ...

  2. css 权重 特殊性

    选择器的特异性由 CSS2 规范定义如下:     !important的规则比其他的权值都大     p{color: red !important} 如果声明来自于“style”属性,而不是带有选 ...

  3. Android打开/data/目录以及导出文件

    打开logcat和和file Explorer Tools-->Android-->Android Device Monitor 如果右侧没有出现,Windows-->Show Vi ...

  4. linux mysql无故无法启动了,centos 7

    转自: http://support.moonpoint.com/software/database/mysql/not-running-centos7.php 下面简单翻译一下. 详细内容可以阅读英 ...

  5. CentOS配置上网

    CentOS设置:   进入CentOS命令模式: Centos7更改默认启动桌面(或命令行)模式 vi /etc/inittab:查看启动文件,在该文件中存在两种方式: multi-user.tar ...

  6. 翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  7. struts2 内容记录

    多xml文件配置 在开发过程中我们经常会将每一张表(如:user表)的struts.xml文件分开,便于管理,故需要建立struts_user.xml文件管理请求等.那么需要用到inculde标签. ...

  8. fio——IO基准测试

    简介 fio是IO工具,既可以用于基准测试,也可以用于硬件的压力测试验证(stress/hardware verification). 支持13种不同的IO引擎(sync.mmap.libaio.po ...

  9. 【转】python XML 操作总结(创建、保存和删除，支持utf-8和gb2312)

    原文地址:http://hi.baidu.com/tbjmnvbagkfgike/item/6743ab10af43bb24f6625cc5 最近写程序需要用到xml操作,看了看python.org上 ...

  10. BootStrap的入门和响应式的使用

    在做前端开发中,其实有百分之四十的时间用来布局写样式,百分之三十用来写JS逻辑交互,百分之三十时间用来测试调bug,可以看的到的是,用在布局+样式的时候会比较多, 所以会有很多的前端框架诞生,例如bo ...