• css实现下拉列表练习,原来javascipt的onmouseover和onmouseout可以用css轻松实现


    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href="style/style.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="js.js"></script>
        <style type="text/css">


        </style>
        <script type="text/javascript">


        </script>
    </head>
    <body>
    <h3>标题栏测试</h3>


    <div id="nav">
        <ul>
            <li>我的首页
                <ul>
                    <li><a href="#">我的Png</a></li>
                    <li><a href="#">我的Gif</a></li>
                    <li><a href="#">我的酷站</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </li>
            <li>我的首页
                <ul>
                    <li><a href="#">我的Png</a></li>
                    <li><a href="#">我的Gif</a></li>
                    <li><a href="#">我的酷站</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </li>
            <li>我的首页
                <ul>
                    <li><a href="#">我的Png</a></li>
                    <li><a href="#">我的Gif</a></li>
                    <li><a href="#">我的酷站</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </li>
            <li>我的首页
                <ul>
                    <li><a href="#">我的Png</a></li>
                    <li><a href="#">我的Gif</a></li>
                    <li><a href="#">我的酷站</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </body>

    </html>

    ==============================================

    CSS

    ==============================================

    body {
        background: #fff;
        font-size: 16px;
    }


    h3 {
        text-align: center;
    }


    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }


    #nav > ul > li {
        120px;
        border: 1px solid #eee;
        background: #f1fbec;
        padding: 4px 0;
        text-align: center;
        color: #999;
        cursor: pointer;
        position: relative;
        float: left;
        margin: 10px;
    }


    #nav ul li:hover {
        background: #f1fbec;
        color: #666;
        border: none;
    }


    #nav > ul > li > ul {
        border: 1px solid #eee;
        border-top: none;
        background: #f1fbec;
        position: absolute;
        top: 26px;
        left: 0;
        display: none;
    }


    #nav > ul > li > ul li a {
        color: #666;
        text-decoration: none;
        font-weight: bold;
    }


    #nav > ul > li > ul > li {
        120px;
        padding: 10px 0;
        border: none;
    }


    #nav > ul > li > ul > li:hover {
        background: lightgreen;
        color: black;
        font-weight: bold;
        font-size: 20px;
    }


    #nav ul li:hover > ul {
        display: block;
    }

  • 相关阅读:
    TiDB数据库05TiDB的用户管理与安全,文件与日志管理
    Java基础知识16Arrays、System常用方法使用
    TiDB数据库07TiDB集群管理(TiDB/TiKV/PD/TiFlash在线扩容与在线缩容)
    【转】在SQL Server中创建用户角色及授权(使用SQL语句)
    Javascript的IE和Firefox兼容问题
    JavaScript的私有变量
    JavaScript 中的内存泄露模式
    javascript内存泄漏问题
    全面理解javascript的caller,callee,call,apply概念(修改版)
    javascript跨域问题
  • 原文地址:https://www.cnblogs.com/i124q29/p/3842542.html
Copyright © 2020-2023  润新知