<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 ">
<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>
<body>
<ul id= "NAV" >
<li class= "Child" > Database
<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" > Foreground script
<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" > Background script
<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 is the HtmlElement object
UlObj1.style.display = "None";
This.style.backgroundcolor= "#3E3E3E";
this.style.color= "White";
}
}
</script>
</body>
