 
<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">數(shù) 據(jù) 庫 
<ul id="menu"> 
<li><a >MySQL</a></li> 
<li><a >SQL Server</a></li> 
<li><a >Oracle</a></li> 
<li><a >DB2</a></li> 
</ul> 
</li> 
<li class="child">前臺腳本 
<ul id="menu"> 
<li><a >JavaScript</a></li> 
<li><a >Ruby</a></li> 
<li><a >HTML</a></li> 
<li><a >Python</a></li> 
</ul> 
</li> 
<li class="child">后臺腳本 
<ul id="menu"> 
<li><a >PHP</a></li> 
<li><a >ASP</a></li> 
<li><a >ASP.NET</a></li> 
<li><a >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> 