下拉菜单（JavaScript）
JS代码：
function showsubmenu(li)
{
var submenu=li.getElementsByTagName("ul")[0]; /*因为不止一个ul，所以要加li*/
submenu.style.display="block"; /*要细心啊，因少写了一个字母，都没实现效果，害的我搞了好久*/
}
function hidesubmenu(li)
{
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
CSS代码：
*{
margin:0;
padding:0;}
#nav{
background:#eee;
width:600px;
height:40px;
margin:0 auto; /*居中*/
}
ul{
list-style:none;
}
ul li{
float:left;
width:90px;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
color:#000;
display:block;
}
a:hover{
background:#0F6;
}
ul li ul li{
float:none;
background:#eee;
margin-top:2px;
}
ul li ul {
width:90px;
position:absolute;
left:0px;
top:40px;
display:none; /*事先要将2级菜单隐藏*/
}
ul li ul li a:hover{
background:#063;
}
ul li ul li a{
display:block;
}
html代码：
<div id="nav">
<ul>
<li><a href="#">首页</a> </li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">新闻</a>
<ul>
<li><a href="#">社会</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">财经</a></li>
</ul>
</li>
<li><a href="#">讲座</a>
<ul>
<li><a href="#">社会</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">财经</a></li>
</ul>
</li>
<li><a href="#">网页</a></li>
</ul>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
