Javascript实现简单的下拉二级菜单

最新推荐文章于 2022-02-13 18:31:03 发布

会飞的Pikachu

最新推荐文章于 2022-02-13 18:31:03 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 文章标签： javascript 二级菜单

本文链接：https://blog.csdn.net/u011043843/article/details/30725401

版权

JavaScript 专栏收录该内容

93 篇文章 1 订阅

订阅专栏

在线演示;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>

会飞的Pikachu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Javascript实现简单的下拉二级菜单

<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:
复制链接

扫一扫

专栏目录