zoukankan      html  css  js  c++  java
  • Javascript实现简单的下拉二级菜单

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



  • 相关阅读:
    Wiggle Sort II
    Coin Change
    MPLS LDP 知识要点
    MPLS Aggreate & Untag
    Lab MPLS隐藏标签显示
    Lab MPLS过滤标签转发
    MPLS MTU Aggregation
    研究MPLS MTU的问题
    Lab 利用MPLS解决BGP路由黑洞
    MPLS 标签保留
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/7287229.html
Copyright © 2011-2022 走看看