zoukankan      html  css  js  c++  java
  • 普通的横向下拉菜单

    HTML中的代码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <link href="CSS.css" rel="stylesheet" />
        <script src="JS.js"></script>
    </head>
    <body>
        <ul id="du1">
            <li class="cl1"><div class="div1"></div></li>
            <li class="cl1"><div class="div1"></div></li>
            <li class="cl1"><div class="div1"></div></li>
        </ul>
    </body>
    </html>

    CSS中的代码

    * {
        margin: 0px;
        padding: 0px;
    }
    
    #du1 {
        position: relative;
        top: 100px;
        left: 100px;
         300px;
        height: 50px;
        background-color: aqua;
    }
    
    .cl1 {
        position: relative;
        margin-top: 10px;
         80px;
        height: 30px;
        background-color: red;
        margin-left: 15px;
        list-style-type: none;
        float: left;
    }
    
    .div1 {
        position: relative;
        margin-top: 32px;
         80px;
        height: 90px;
        background-color: navy;
        display: none;
    }
    

      

    JS中的代码

    window.onload = function () {
        var lis = document.getElementsByClassName("cl1");
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                var div = this.getElementsByClassName("div1");
                div[0].style.display = "block";
            }
            lis[i].onmouseout = function () {
                var div = this.getElementsByClassName("div1");
                div[0].style.display = "none";
            }
        }
    };
  • 相关阅读:
    编写 unix和 windows的 Scala 脚本
    4种复制文件的方式性能比较
    Cacheable key collision with DefaultKeyGenerator
    Spring Cache 介绍
    Centos提示-bash: make: command not found的解决办法
    Scala的sealed关键字
    Groupby
    scala break & continue
    Scala implicit
    Scala可变长度参数
  • 原文地址:https://www.cnblogs.com/123lucy/p/5638733.html
Copyright © 2011-2022 走看看