在线演示;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. grunt任务自动管理

    Grunt管理工具使用: 一.模块安装 1.在项目的根目录里新建package.json文件,形式如下,指定依赖的库以及版本信息. 2.然后在项目根目录下,执行 npm install ,安装json ...

  2. UWP Composition API - RadialMenu

    用Windows 8.1的童鞋应该知道OneNote里面有一个RadialMenu.如下图,下图是WIn10应用Drawboard PDF的RadialMenu,Win8.1的机器不好找了.哈哈,由于 ...

  3. C#保留小数位数的方法

    1.System.Globalization.NumberFormatInfo provider = new System.Globalization.NumberFormatInfo();provi ...

  4. 继承JFrame，只是初步

    import java.awt.*; import javax.swing.*; import javax.swing.JFrame; import java.awt.event.WindowList ...

  5. [转载] Java并发编程：Lock

    转载自http://www.cnblogs.com/dolphin0520/p/3923167.html 以下是本文目录大纲: 一.synchronized的缺陷 二.java.util.concur ...

  6. [转载] Java并发编程：Callable、Future和FutureTask

    转载自http://www.cnblogs.com/dolphin0520/p/3949310.html 在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Run ...

  7. ReentrantLock可重入锁的使用场景

    摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些. 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a.用在定时任务时,如果任务执行时间可能超过下次 ...

  8. 从零开始搭建ELK+GPE监控预警系统

    前言 本文可能不会详细记录每一步实现的过程,但一定程度上可以引领小伙伴走向更开阔的视野,串联每个环节,呈现予你不一样的效果. 业务规模 8个平台 100+台服务器 10+个集群分组 微服务600+ 用 ...

  9. 关于web程序中使用KindEditor向数据库插入带有格式的数据时出现的问题

    最近做一个项目,需要对输入的文字在存入数据库之前进行文本格式编辑,于是我用到了KindEditor,当然怎么用在asp.net页面中,这里就不过多叙述了. 主要是遇到在将赋予格式的文本插入数据库时遇到 ...

  10. Unbuntu16.04安装搜狗拼音输入法

    为了让自己的电脑相对安全一些,我安装了ubuntu的物理机 因为要经常输入汉字,我就在unbuntu里面安装了搜狗输入法 1.在搜狗输入法官网下载Linux版本的安装包:http://pinyin.s ...