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>

  • 相关阅读:
    使用powerdesigner导入sql脚本,生成物理模型
    深入理解[代理模式]原理与技术
    8、Dockerfile介绍和最佳实践
    7、Docker监控方案(cAdvisor+InfluxDB+Grafana)
    6、Docker图形化管理(Portainer)
    5、Docker网络配置(单机)
    4、Docker数据管理
    html二
    html
    IO多路复用,协程,
  • 原文地址:https://www.cnblogs.com/niushuangmeng/p/8006121.html
Copyright © 2011-2022 走看看