9月23日 子菜单下拉
Posted 飘逸De精灵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了9月23日 子菜单下拉相关的知识，希望对你有一定的参考价值。
<style type="text/css">
*{ margin:0px auto; padding:0px}
#menu{ width:700px; height:40px; border:1px solid #999; margin-top:30px}
.list{ width:100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; font-size:16px; font-family:微软雅黑; float:left}
.list:hover{ cursor:pointer; color:white}
.ziwai{width:0px; height:0px;position:relative; float:left; top:40px; left:-100px}
.zi{ width:100px; height:100px; display:none }
</style>
</head>
<body>
<div id="menu">
<div class=‘list‘ onmouseover="Show(‘z1‘)" onmouseout="YinCang()">首页</div>
<div class="ziwai" >
<div class="zi" id="z1"></div>
</div>
<div class=‘list‘ onmouseover="Show(‘z2‘)" onmouseout="YinCang()">产品介绍</div>
<div class="ziwai" >
<div class="zi" id="z2"></div>
</div>
<div class=‘list‘ onmouseover="Show(‘z3‘)" onmouseout="YinCang()">公司简介</div>
<div class="ziwai" >
<div class="zi" id="z3"></div>
</div>
<div class=‘list‘ onmouseover="Show(‘z4‘)" onmouseout="YinCang()">联系我们</div>
<div class="ziwai" >
<div class="zi" id="z4"></div>
</div>
<div class=‘list‘ onmouseover="Show(‘z5‘)" onmouseout="YinCang()">新闻动态</div>
<div class="ziwai" >
<div class="zi" id="z5"></div>
</div>
</div>
</body>
<script type="text/javascript">
function Show(id)
{
//让所有的子菜单隐藏
var attr = document.getElementsByClassName("zi");
for(var i=0; i<attr.length;i++)
{
attr[i].style.display = "none";
}
//让和该菜单关联的子菜单显示
document.getElementById(id).style.display = "block";
}
function YinCang()
{
var attr = document.getElementsByClassName("zi");
for(var i=0; i<attr.length;i++)
{
attr[i].style.display = "none";
}
}
</script>
</html>
以上是关于9月23日 子菜单下拉的主要内容，如果未能解决你的问题，请参考以下文章