Javascript实现简单二级下拉菜单实例
<spanstyle="font-size:14px;"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="content-type"content="texthtml;charset=utf-8">
<title>Menu</title>
<styletype="text/css">
#nav
{
list-style:none;
text-align:center;
}
#navli
{
float:left;
width:100px;
color:white;
background-color:#3E3E3E;
}
#menu
{
list-style:none;
padding:5px;
display:none;
margin-left:-5px;
margin-top:-5px;
}
#menuli
{
background-color:#ccc;
width:100px;
text-align:left;
padding-left:10px;
}
#menulia:link
{
text-decoration:none;
display:block;
}
#menulia:hover
{
background-color:#3E3E3E;
color:white
}
</style>
</head>
<body>
<ulid="nav">
<li>数据库
<ulid="menu">
<li><ahref="http://blog.csdn.net/u011043843">MySQL</a></li>
<li><ahref="http://blog.csdn.net/u011043843">SQLServer</a></li>
<li><ahref="http://blog.csdn.net/u011043843">Oracle</a></li>
<li><ahref="http://blog.csdn.net/u011043843">DB2</a></li>
</ul>
</li>
<li>前台脚本
<ulid="menu">
<li><ahref="http://blog.csdn.net/u011043843">JavaScript</a></li>
<li><ahref="http://blog.csdn.net/u011043843">Ruby</a></li>
<li><ahref="http://blog.csdn.net/u011043843">HTML</a></li>
<li><ahref="http://blog.csdn.net/u011043843">Python</a></li>
</ul>
</li>
<li>后台脚本
<ulid="menu">
<li><ahref="http://blog.csdn.net/u011043843">PHP</a></li>
<li><ahref="http://blog.csdn.net/u011043843">ASP</a></li>
<li><ahref="http://blog.csdn.net/u011043843">ASP.NET</a></li>
<li><ahref="http://blog.csdn.net/u011043843">JSP</a></li>
</ul>
</li>
</ul>
<scripttype="text/javascript">
varlis=document.getElementById("nav").getElementsByTagName('li');
vari=0;
for(i=0;i<lis.length;i++)
{
if(lis[i].className=="child")
{
lis[i].onmouseover=function()
{
varulObj1=this.getElementsByTagName('ul')[0];
ulObj1.style.display="block";
this.style.backgroundColor="#ccc";
this.style.color="black";
}
}
lis[i].onmouseout=function()
{
varulObj1=this.getElementsByTagName('ul')[0];//this是HTMLElement对象
ulObj1.style.display="none";
this.style.backgroundColor="#3E3E3E";
this.style.color="white";
}
}
</script>
</body>
</html></span>
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短