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

经典下拉式菜单 js+css 实现

2015-08-06 15:40 645 查看

<html>
<head>
<title>s</title>
<style type="text/css">
#a,#b,#c{display:none; margin-left:10px;}
ul{list-style:none;margin:0;}
</style>
<script type="text/javascript">
function aaa(){
var a=document.getElementById("a");
var link1=document.getElementById("link1");
link1.onclick=function(){
if(a.style.display=="block")
a.style.display="none";
else
a.style.display="block";
}
//     link1.onmouseout=function(){
//          a.style.display="none";
//     }

var b=document.getElementById("b");
var link2=document.getElementById("link2");
link2.onclick=function(){
if(b.style.display=="block")
b.style.display="none";
else
b.style.display="block";
}
//     link2.onmouseout=function(){
//          b.style.display="none";
//     }

var c=document.getElementById("c");
var link3=document.getElementById("link3");
link3.onclick=function(){
if(c.style.display=="block")
c.style.display="none";
else
c.style.display="block";
}
//     link3.onmouseout=function(){
//          c.style.display="none";
//     }
}
window.onload=function(){
aaa();
}
</script>
</head>
<body>
<ul>
<li id="link1">菜单一
<ul id="a">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</li>
<li id="link2">菜单二
<ul id="b">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</li>
<li id="link3">菜单三
<ul id="c">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</li>

</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航