您的位置：首页 > Web前端 > JavaScript

简单的横向下拉菜单js

2015-10-08 20:44 543 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>横向下拉菜单</title>
<style>
/*  #menu{
width:100%;
background:#EBEBEB;
}*/
#nav{
background-color:#EBEBEB;
width:880px;
height:30px;
margin:0px auto;
}
#nav li{float:left;list-style:none;}
#nav li a{
display:block;
width:110px;
height:30px;
line-height:30px;
list-style:none;
text-align:center;
}
a{text-decoration:none;color:#fff;font-weight:bold;}
a:hover{
background:#ccc;
}
ul,li{
margin:0px;padding:0px;
}
#nav li .show{
position:absolute;
background:#000;
}
#nav li .show li{
float:none;
position:relatvie;
list-style:none;
}

</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li>
<a href="">首页</a>
<ul></ul>
</li>
<li>
<a href="">关于我们</a>
<ul style="display:none;">
<li><a href="">公司简介</a></li>
<li><a href="">公司资讯</a></li>

</ul>
</li>
<li>
<a href="">新闻中心</a>
<ul style="display:none;">
<li><a href="">企业新闻</a></li>

<li><a href="">世界新闻</a></li>
</ul>
</li>
<li >
<a href="">产品展示</a>
<ul style="display:none;">
<li><a href="">企业新闻</a></li>

<li><a href="">世界新闻</a></li>

</ul>
</li>
<li>
<a href="">案例展示</a>
<ul style="display:none;">
<li><a href="">企业新闻</a></li>

<li><a href="">世界新闻</a></li>

</ul>
</li>
<li>
<a href="">人才招聘</a>
<ul style="display:none;">
<li><a href="">企业新闻</a></li>

<li><a href="">世界新闻</a></li>
</ul>
</li>
<li>
<a href="">客户留言</a>
<ul style="display:none;">
<li><a href="">企业新闻</a></li>

<li><a href="">世界新闻</a></li>
</ul>
</li>
<li>
<a href="">联系我们</a>
<ul style="display:none;">
<li><a href="">笔记本电脑</a></li>
<li><a href="">智能手机</a></li>
<li><a href="">iPhone5</a></li>
</ul>
</li>
</ul>
</div>

<script>
var nav=document.getElementById("nav");
//获得所有子节点(元素节点，文本节点，属性节点...等等)
var liList=nav.childNodes;
//循环遍历所有节点
for(var i=0;i<liList.length;i++){
//判断是否是元素节点
if(liList[i].nodeType==1){
liList[i].onmouseover=function(){
var ulOne=this.getElementsByTagName("ul")[0];
ulOne.style.display="block";
ulOne.className="show";
}
liList[i].onmouseout=function(){
var ulOne=this.getElementsByTagName("ul")[0];
ulOne.style.display="none";
}
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航