DIV实现下拉菜单
<style>
*{
margin:0px;
padding:0px;
}
#nav{
list-style-type:none;
font-size:12px;
}
#nav li{
float:left;
width:80px;
position:relative;
/*控制下拉框的位置，让它在 “菜单二”的“LI“下面活动*/
height:22px;
/*这个一定要定义的，“菜单”一栏的高度，也是onmouseover和onmouseout使用的范围*/
padding-top:4px;
}
#nav li ul{
display:none;
/*让菜单二下面的“ul”不要显示，配合onmouseover和onmouseout显示*/
position:absolute;
/*让菜单二下面的下拉“UL”显示，并不要把菜单栏撑大（撑大效果见下面，我会贴出来的，哈哈）*/
top:22px;
/*此属性唯有定义了position:absolute;属性才能使用，是定位下拉框的，距离上面多少*/
left:0px;
/*此属性唯有定义了position:absolute;属性才能使用，是定位下拉框的，距离左边多少*/
border:1px solid #C4E4FF;
}
#nav li ul li{
float:left;
background-color:#F7FCFF;
padding:2px 2px 2px 8px;
width:80px
}
#nav li:hover ul , #nav li.over ul{
display:block;
/*显示下拉框*/
}
</style>
<script>
function viewNav(){
navRoot=document.getElementById("nav").getElementsByTagName("li");
//找到id为nav，下面所有LI标签
for (i=0; i< navRoot.length;i++){
navRoot[i].onmouseover=function(){
this.className += " over";
//给LI标签加上css类“over”，加空格是为了防止之前已经定义css类。
}
navRoot[i].onmouseout=function(){
this.className=this.className.replace(" over","");
//去除之前加上的“over”，注意前面有空格
}
}
}
window.onload=viewNav;
</script>
<ul id="nav">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a>
<!--我是下拉菜单，属于菜单二-->
<ul>
<li><a href="#">菜单二（1）</a></li>
<li><a href="#">菜单二（2）</a></li>
<li><a href="#">菜单二（3）</a></li>
</ul>
<!--下拉菜单结束-->
<li><a href="#" >菜单三</a></li>
<ul>
<li><a href="#">我的子菜单</a></li>
</ul>
</ul>
*{
margin:0px;
padding:0px;
}
#nav{
list-style-type:none;
font-size:12px;
}
#nav li{
float:left;
width:80px;
position:relative;
/*控制下拉框的位置，让它在 “菜单二”的“LI“下面活动*/
height:22px;
/*这个一定要定义的，“菜单”一栏的高度，也是onmouseover和onmouseout使用的范围*/
padding-top:4px;
}
#nav li ul{
display:none;
/*让菜单二下面的“ul”不要显示，配合onmouseover和onmouseout显示*/
position:absolute;
/*让菜单二下面的下拉“UL”显示，并不要把菜单栏撑大（撑大效果见下面，我会贴出来的，哈哈）*/
top:22px;
/*此属性唯有定义了position:absolute;属性才能使用，是定位下拉框的，距离上面多少*/
left:0px;
/*此属性唯有定义了position:absolute;属性才能使用，是定位下拉框的，距离左边多少*/
border:1px solid #C4E4FF;
}
#nav li ul li{
float:left;
background-color:#F7FCFF;
padding:2px 2px 2px 8px;
width:80px
}
#nav li:hover ul , #nav li.over ul{
display:block;
/*显示下拉框*/
}
</style>
<script>
function viewNav(){
navRoot=document.getElementById("nav").getElementsByTagName("li");
//找到id为nav，下面所有LI标签
for (i=0; i< navRoot.length;i++){
navRoot[i].onmouseover=function(){
this.className += " over";
//给LI标签加上css类“over”，加空格是为了防止之前已经定义css类。
}
navRoot[i].onmouseout=function(){
this.className=this.className.replace(" over","");
//去除之前加上的“over”，注意前面有空格
}
}
}
window.onload=viewNav;
</script>
<ul id="nav">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a>
<!--我是下拉菜单，属于菜单二-->
<ul>
<li><a href="#">菜单二（1）</a></li>
<li><a href="#">菜单二（2）</a></li>
<li><a href="#">菜单二（3）</a></li>
</ul>
<!--下拉菜单结束-->
<li><a href="#" >菜单三</a></li>
<ul>
<li><a href="#">我的子菜单</a></li>
</ul>
</ul>
请发表评论