下拉菜单（JavaScript）

标签：des   style   io   color   ar   os   sp   java   div   

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>

下拉菜单（JavaScript）

标签：des   style   io   color   ar   os   sp   java   div   

原文地址：http://www.cnblogs.com/yunian/p/4101216.html