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

    <style type="text/css">
    *{ margin:0px auto; padding:0px;font-family:微软雅黑}
    #wai{width:800px;height:50px;}
    .menu{width:100px;height:50px;float:left;text-align:center;vertical-align:middle;line-height:50px;border:1px solid #C36}
    .erji{width:0px;height:0px;float:left;position:relative;top:52px;left:-102px;display:none}
    .two{width:100px;height:200px;background-color:#C33;border:1px solid #C36}
    #nr{width:100%;height:500px;background-color:#C66}
    </style>
    
    </head>
    
    <body>
    <div id="wai">
        <div class="menu">首页</div>
        <div class="erji">
            <div class="two"></div>
        </div>
        <div class="menu">产品中心</div>
         <div class="erji">
            <div class="two"></div>
        </div>
        <div class="menu">新闻动态</div>
         <div class="erji">
            <div class="two"></div>
        </div>
        <div class="menu">联系我们</div>
         <div class="erji">
            <div class="two"></div>
        </div>
        <div class="menu">关于我们</div>
         <div class="erji">
            <div class="two"></div>
        </div>
      
    </div>
    <div id="nr"></div>
    <script type="text/javascript">
    var menu = document.getElementsByClassName("menu");
    for(var i=0;i<menu.length;i++){
        menu[i].onmouseover = function(){
            this.nextSibling.nextSibling.style.display = "block";
            }
        }
    for(var i=0;i<menu.length;i++){
        menu[i].onmouseout = function(){
            this.nextSibling.nextSibling.style.display = "none";
            }
        }
    </script>
    </body>
    </html>

  • 相关阅读:
    用FileSystemWatcher监视文件系统
    生成随机汉字验证码
    MySQL学习笔记二
    python高级学习笔记
    boost bind 表达式中的是值语义还是指针语义?
    容器与适配器的个人总结
    subversion linux使用方法
    boost asio(初学示例)
    MySQL学习笔记一
    subversion 命令
  • 原文地址:https://www.cnblogs.com/niushuangmeng/p/8006121.html
Copyright © 2011-2022 走看看