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