在线演示;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. C# join子句

    join 子句可用于将来自不同源序列并且在对象模型中没有直接关系的元素相关联. 唯一的要求是每个源中的元素需要共享某个可以进行比较以判断是否相等的值. 例如,食品经销商可能拥有某种产品的供应商列表以及 ...

  2. sublime 集成git插件，及git常用命令

    以前用了很久的totoiseSVN,显然不够高大上,开发界的版本装x利器还得是git.然而git的命令行对没怎么用过linux的人可能觉得还不如用gitGUI,可是当你知道sublime可以集成git ...

  3. （原创）遗传算法C++实现

    本文没有对遗传算法的原理做过多的解释 基础知识可以参考下面的博客:http://blog.csdn.net/u010451580/article/details/51178225 本实验用到的变异用到 ...

  4. Java工具类之——BigDecimal运算封装（包含金额的计算方式）

    日常对于金额计算,应该都是用的BigDecimal,  可是苦于没有好的工具类方法,现在贡献一个我正在用的对于数字计算的工具类,项目中就是用的这个,简单粗暴好用,话不多说,代码奉上(该工具类需要引入g ...

  5. 通过PING命令中的TTL来判断对方操作系统

    ---恢复内容开始--- 通过PING命令中的TTL来判断对方操作系统简单来说,TTL全程Time to Live,意思就是生存周期.首先要说明ping命令是使用的网络层协议ICMP,所以TTL指的是 ...

  6. nodeCZBK-笔记1

    [TOC] ****************************** day01 node简介 Node.js是一个让JavaScript运行在服务器端的开发平台. node就是一个js的执行环境 ...

  7. 《天书夜读：从汇编语言到windows内核编程》九 时间与定时器

    1)使用如下自定义函数获取自系统启动后经历的毫秒数:KeQueryTimeIncrement.KeQueryTickCount void MyGetTickCount(PULONG msec) { L ...

  8. MySQL解压版配置步骤详细教程

    解压mysql到D盘根目录 在解压路径下复制my-default.ini,修改名称为my.ini 在my.ini内容如下 [client]default-character-set=utf8 [mys ...

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

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

  10. sql替换

    select * ,replace(NewsContent,'src=','修改后的内容') as rep from News where id=337update News set NewsCont ...