在线演示;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. MQTT——订阅报文

    我们已经把相关的连接报文搞定了.笔者想来想去还是决定先讲解一下订阅报文(SUBSCRIBE ).如果传统的通信方式是客户端和服务端之间一般就直接传输信息.但是MQTT的通信方式是通过发布/订阅的方式进 ...

  2. 全国DNS服务器地址(部分)

    广东: 广东省广州市(中国电信) 首选DNS:61.144.56.100 备份DNS:61.144.56.101 广东省广州市越秀区(中国电信) 首选DNS:202.96.128.86 备份DNS:2 ...

  3. C#编程命名规范推荐

    1.用Pascal规则来命名方法和类型. Pascal 大小写形式是指名称中的单词的第一个字母大写public class DataGrid{public void DataBind(){ }} 2. ...

  4. c# word文档与二进制数据的相互转换

    最近项目出使用到了将word文档以二进制的方法存到数据库中,并再次读取出二进制数据转换为word文档.最后总结了一下,不多说看示例方法: 代码 , content.Length);           ...

  5. 很考验人的java内存加载面试题

    源代码如下,求结果 public class MemoryAnalyse { public static int k = 0; public static MemoryAnalyse t1 = new ...

  6. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  7. 分布式网络文件系统--MooseFS

    一.介绍 1.简介 MooseFS是一个具备冗余容错功能的分布式网络文件系统,它将数据分别存放在多个物理服务器或单独磁盘或分区上,确保一份数据有多个备份副本.对于访问的客户端或者用户来说,整个分布式网 ...

  8. 五、VueJs 填坑日记之将接口用webpack代理到本地

    上一篇博文,我们已经顺利的从cnodejs.org请求到了数据,但是大家可以注意到我们的/src/api/index.js的第一句就是: // 配置API接口地址 var root = 'https: ...

  9. Python StringIO与BytesIO、类文件对象

    StringIO与BytesIO StringIO与BytesIO.类文件对象的用途,应用场景,优.缺点. StringIO StringIO 是io 模块中的类,在内存中开辟的一个文本模式的buff ...

  10. 【技术翻译】支持向量机简明教程及其在python和R下的调参

    原文:Simple Tutorial on SVM and Parameter Tuning in Python and R 介绍 数据在机器学习中是重要的一种任务,支持向量机(SVM)在模式分类和非 ...