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

200 阅读 0 评论 132 点赞

我是靠谱客的博主大力自行车，最近开发中收集的这篇文章主要介绍Javascript实现简单二级下拉菜单实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

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