zoukankan      html  css  js  c++  java
  • 子菜单下拉

    子菜单下拉

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0px auto; padding:0px;}
    #items{760px; height:50px;}
    .itema{ 150px; height:50px; background-color:#666; border-right:1px solid #000; float:left; color:#fff; text-align:center; line-height:50px; vertical-align:middle}
    .itema:hover{ cursor:pointer}
    .hid{ 0px; height:0px; float:left; position:relative; top:50px; left:-150px}
    .hid1{ 150px; height:50px; line-height:50px; vertical-align:middle; text-align:center; background-color:#0F0}
    </style>
    </head>
    
    <body>
     <div id="items">
         <div class="itema">产品详情</div>
        <div class="hid" style=" display:none">  //做一个0大小的div
            <div class="hid1">123</div>
            <div class="hid1">123</div>
            <div class="hid1">123</div>
        </div>
        <div class="itema">新闻中心</div>
        <div class="hid" style=" display:none">
            <div class="hid1">123</div>
            <div class="hid1">123</div>
            <div class="hid1">123</div>
        </div>
        <div class="itema">公司动态</div>
        <div class="hid" style=" display:none">
            <div class="hid1">123</div>
            <div class="hid1">123</div>
            <div class="hid1">123</div>
        </div>
        <div class="itema">关于我们</div>
        <div class="hid" style=" display:none">
            <div class="hid1">123</div>
            <div class="hid1">123</div>
            <div class="hid1">123</div>
        </div>
        <div class="itema">联系我们</div>
        <div class="hid" style=" display:none">
            <div class="hid1">123</div>
            <div class="hid1">123</div>
            <div class="hid1">123</div>
        </div>
     </div>
    </body>
    </html>
    <script type="text/javascript">
    var itema = document.getElementsByClassName("itema")
    for(var i=0;i<itema.length;i++)
    {
        itema[i].onmouseover = function()
        {
            this.nextSibling.nextSibling.style.display = "block";
        }
    }     //鼠标移上时,展开
    for(var i=0;i<itema.length;i++)
    {    itema[i].onmouseout = function(){
        this.nextSibling.nextSibling.style.display = "none";
        }
    }    //鼠标移出时,收回
    </script>

    效果图:

  • 相关阅读:
    SQLite out of order error备忘
    SQLITE_TOOBIG
    Android CursorWindow问题备忘
    SQLite3神奇的UNION、UNION ALL与LIMIT组合
    Android Database(SQLite)参数绑定问题初探
    Android SQLite 加入自定义函数
    修改替换/system/framework/framework.jar后重启手机为何没有效果?
    手动调用NDK编译HelloWorld
    第一篇
    程序题
  • 原文地址:https://www.cnblogs.com/Whitehat/p/8025666.html
Copyright © 2011-2022 走看看