今日练习：使用html+css简单实现导航下拉菜单。

html：

    <ul>
        <li class="active">
            <a href="javascript:;">首页</a>
        </li>
        <li><a href="javascript:;">新闻</a></li>
        <li class="dropdown-button">
            <a href="javascript:;">资源</a>
            <div class="dropdown-menu">
                <a href="javascript:;">游戏</a>
                <a href="javascript:;">电影</a>
                <a href="javascript:;">靓女</a>
                <a href="javascript:;">靓仔</a>
            </div>
        </li>
        <li><a href="javascript:;">关于</a></li>
    </ul>
    <h3>这是一个下拉菜单练习</h3>
    <p><a href="https://c.runoob.com/">这是一个链接</a></p>
    <p><a
            href="https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0%20%20%20%20%20%20%20%20*/%20%20">这又是一个链接</a>
    </p>

css：

        body,
        html {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            background-color: black;
            /* 注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(当li{float:left}时) */
            overflow: hidden;
        }

        li {
            float: left;
        }

        li a {
            color: white;
            padding: 20px;
            display: inline-block;
            text-decoration: none;
        }

        li>a.active {
            background-color: #31c27c;
        }

        li>a:hover:not(.active),
        .dropdown-button:hover {
            background-color: #31c27c;
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            background-color: #000;
            min-width: 100px;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
        }

        .dropdown-menu a {
            color: #fff;
            display: block;
        }

        .dropdown-menu a:hover {
            background-color: #31c27c;
        }

        .dropdown-button:hover .dropdown-menu {
            display: block;
        }

仙路崎岖，磨难并不可怕，坚持终成正果 ！