• 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;
    }

  • 相关阅读:
    velocity导出word报错解决
    Java解析网段下包含的所有IP地址
    ORACLE中的DECODE函数
    td标签内的内容过长导致的问题的解决办法
    android 知识点
    geekNews 学习总结
    android 操蛋的gradle
    rxJava rxandroid 学习
    线程池ThreadPoolExecutor
    j2ee tomcat 部署学习
  • 原文地址:https://www.cnblogs.com/i124q29/p/3842542.html
Copyright © 2020-2023  润新知