javascript实现带下拉子菜单的导航菜单效果
本文实例讲述了javascript实现带下拉子菜单的导航菜单效果。分享给大家供大家参考。具体实现方法如下：
<!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="text/html;charset=utf-8"/>
<title>带下拉子菜单的导航菜单</title>
<styletype="text/css">
body{font-family:Verdana;font-size:12px;line-height:1.5;}
a{color:#000;text-decoration:none;}
a:hover{color:#F00;}
#menu{width:500px;height:28px;margin:0auto;border-bottom:3pxsolid#E10001;}
#menuul{list-style:none;margin:0px;padding:0px;}
#menuulli{float:left;margin-left:2px;}
#menuullia{display:block;width:87px;height:28px;line-height:28px;text-align:center;font-size:14px;}
#menuullia#current{font-weight:bold;color:#fff;}
#menuulliul{border:1pxsolid#ccc;display:none;position:absolute;}
#menuulliulli{float:none;width:87px;background:#eee;margin:0;}
#menuulliullia{background:none;}
#menuulliullia:hover{background:#333;color:#fff;}
#menuulli:hoverul{display:block;}
#menuulli.sfhoverul{display:block;}
</style>
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
functionmenuFix(){
varsfEls=document.getElementById("menu").getElementsByTagName("li");
for(vari=0;i<sfEls.length;i++){
sfEls[i].onmouseover=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onMouseDown=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onMouseUp=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("(?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]>
</script>
</head>
<body>
<divid="menu">
<ul>
<li><aid="current"href="#">首页</a></li>
<li><ahref="#">网页版式</a>
<ul>
<li><ahref="#">自适应宽度</a></li>
<li><ahref="#">固定宽度</a></li>
</ul>
</li>
<li><ahref="#">web教程</a>
<ul>
<li><ahref="#">新手入门</a></li>
<li><ahref="#">视频教程</a></li>
<li><ahref="#">常见问题</a></li>
</ul>
</li>
<li><ahref="#">web实例</a></li>
<li><ahref="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。