在线演示;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. grid 布局 CSS3

    display:grid 是一种新的布局方式,旧的布局方式通常有副作用,例如float(需要额外修复浮动)或者inline-block(两个元素之间的空格问题)   把父元素定义为grid,就像表格一 ...

  2. Problem F: 多少个最大值？

    Description 输入若干个int类型的整数,求它们的最大值及其个数. Input 输入 若干个int类型的整数,至文件尾为止. Output 输出只有一行:There are # maximu ...

  3. 基于webpack搭建的vue+element-ui框架

    花了1天多的时间, 终于把这个框架搭建起来了. 好了, 不多说了, 直接进入主题了.前提是安装了nodejs,至于怎么安装, 网上都有教程. 这里就不多说了, 这边使用的IDE是idea.1.在E:/ ...

  4. 《Github入门与实践》读书笔记 蟲咋先生的追求之旅（上）

    <Github入门与实践>作者: [日] 大塚弘记 译者:支鹏浩/刘斌   简介 本书从Git的基本知识和操作方法入手,详细介绍了GitHub的各种功能,GitHub与其他工具或服务的协作 ...

  5. 面试题：判断连个字符串是否互为回环变位（Circular Rotaion）

    题干:   如果字符串 s 中的字符循环移动任意位置之后能够得到另一个字符串 t,那么 s 就被称为 t 的回环变位(circular rotation).   例如,ACTGACG 就是 TGACG ...

  6. ssm框架下web项目，web.xml配置文件的作用

    1. web.xml中配置了CharacterEncodingFilter,配置这个是拦截所有的资源并设置好编号格式. encoding设置成utf-8就相当于request.setCharacter ...

  7. 从运维的角度分析使用阿里云数据库RDS的必要性--你不应该在阿里云上使用自建的MySQL/SQL Server/Oracle/PostgreSQL数据库

    开宗明义,你不应该在阿里云上使用自建的MySQL or SQL Server数据库,对了,还有Oracle or PostgreSQL数据库. 云数据库 RDS(Relational Database ...

  8. PHP通过Zabbix API获取服务器监控信息

    开源监控系统Zabbix提供了丰富的API,供第三方系统调用. 基本步骤如下: 1.获取合法认证:连接对应Zabbix URL,并提供用户名和密码,HTTP方法为"POST",HT ...

  9. radis学习总结

    Redis与Memcached的比较. 1.Memcached是多线程,而Redis使用单线程. 2.Memcached使用预分配的内存池的方式,Redis使用现场申请内存的方式来存储数据,并且可以配 ...

  10. 打印中文dict list的各种姿势

    在开发过程中,我们经常需要打印一些变量的值,便于调试.这个时候就会发现如果在dict list这些容器中,如果包含中文字符,不管是str类型,还是unicode类型,都打印不出来.如下: >&g ...