JS下拉列表

方法一：

<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; background-color:#63C; color:white}
.ziwai{width:0px; height:0px;position:relative; float:left; top:40px; left:-100px}
.zi{ width:100px; height:100px; background-color:#6C3; display:none }
</style>
<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>

但是这种方法存在BUG，当鼠标移动到弹出的DIV上时，下拉列表的显示效果会消失

方法二：

<style>
.a
{
    width:80px;
    height:40px;
    }
#a
{
    top:200px;
    left:200px;
    position:absolute;
    background-color:#33C;
    overflow:hidden;}
.b
{
    background-color:#FF0;
    width:80px;
    height:120px;
    top:40px;
    left:0px;
    position:absolute;}
#b1{
    background-color:#FC0;
    top:0px;
    left:0px;
    position:absolute;
    overflow:hidden;}
    #b2{
    background-color:#F6C;
    top:40px;
    left:0px;
    position:absolute;
    overflow:hidden;}
    #b3{
    background-color:#0F3;
    top:80px;
    left:0px;
    position:absolute;
    overflow:hidden;}
</style>
<body>
<div class="a" id="a" onmouseover="over1()" onmouseout="out1()">
  <div class="b">
    <div class="a" id="b1" onmouseover="over2()" onmouseout="out2()">
      <div style="background-color:#FC0; width:80px; height:120px;top:0px; left:80px; position:absolute;"></div>
    </div>
    <div class="a" id="b2" onmouseover="over3()" onmouseout="out3()">
      <div style="background-color:#F6C; width:80px; height:120px;top:0px; left:80px; position:absolute;"></div>
    </div>
    <div class="a" id="b3" onmouseover="over4()" onmouseout="out4()">
      <div style="background-color:#0F3; width:80px; height:120px;top:0px; left:80px; position:absolute;"></div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
function over1()
{
    var a = window.document.getElementById("a");
    a.setAttribute("style","overflow:visible");
}
function out1()
{
    var a = window.document.getElementById("a");
    a.setAttribute("style","overflow:hidden");
}
function over2()
{
    var a = window.document.getElementById("b1");
    a.setAttribute("style","overflow:visible");
}
function out2()
{
    var a = window.document.getElementById("b1");
    a.setAttribute("style","overflow:hidden");
}
function over3()
{
    var a = window.document.getElementById("b2");
    a.setAttribute("style","overflow:visible");
}
function out3()
{
    var a = window.document.getElementById("b2");
    a.setAttribute("style","overflow:hidden");
}
function over4()
{
    var a = window.document.getElementById("b3");
    a.setAttribute("style","overflow:visible");
}
function out4()
{
    var a = window.document.getElementById("b3");
    a.setAttribute("style","overflow:hidden");
}
posted @ 2016-10-18 09:32  天翊丨流光  阅读(157)  评论(0)  编辑  收藏  举报