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

纯css和js版下拉菜单

2014-12-07 23:39 197 查看 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css版下拉菜单</title>
<style type="text/css">
div,body,ul,li{padding:0;margin:0; list-style:none;}
.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;}
li{width:100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;}
ul ul li{color:red;}
ul ul{position:absolute; left:0; top:30px; display:none;}
.ceshi{width:800px; height:100px; background:gold; margin:0 auto;}
.all li:hover ul{display:block;}//ie6死了，可以正大光明不考虑兼容问题了，可以放心使用伪类了
</style>
</head>
<body>
<div class="all">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>网页设计
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>ui设计
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>动画设计
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>js特效
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
<div class="ceshi">测试用</div>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js版下拉菜单</title>
<style type="text/css">
div,body,ul,li{padding:0;margin:0; list-style:none;}
.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;}
li{width:100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;}
ul ul li{color:red;}
ul ul{position:absolute; left:0; top:30px; display:none;}
.ceshi{width:800px; height:100px; background:gold; margin:0 auto;}
</style>
<script>
window.onload=function()
{
var oMenu=document.getElementById('menu');
var aLi=oMenu.children;
var aUl=oMenu.getElementsByTagName('ul');
for(var i=0;i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].onmouseover=function()
{
for(var i=0;i<aUl.length;i++)//首先是先排除再选择自己
{
aUl[i].style.display='none';
}
aUl[this.index].style.display='block';
}
aLi[i].onmouseout=function()
{
for(var i=0;i<aUl.length;i++)
{
aUl[i].style.display='none';
}
}
}

};
</script>
</head>

<body>
<div class="all">
<ul id="menu">
<li><a href="#">首页</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>网页设计
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>ui设计
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>动画设计
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>js特效
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</div>
<div class="ceshi">测试用</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航