JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<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>

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
	    }

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";
				}
		
		}