下拉菜单（css html实现）

最新推荐文章于 2024-07-29 21:48:39 发布

菜鸟闯关记

最新推荐文章于 2024-07-29 21:48:39 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/qq_46342449/article/details/115448483

版权

具体展示效果：
在这里插入图片描述
代码展示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>下拉菜单</title>
    <style>
    /* 用ul li来设置导航栏 */
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: steelblue;
        }        
        li {
            float: left;
            border-right: 1px solid white;
        }        
        li a,
        .dropbtn {
            display: inline-block;
            color: yellow;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }        
        li a:hover,
        .dropdown:hover .dropbtn {
            background-color: tan;
        }        
        /* 设置下拉选项 */
        li.dropdown {
            display: inline-block;
        }   
        /* 下拉选项的具体内容 */    
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: turquoise;
            min-width: 80px;
            box-shadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }        
        .dropdown-content a {
            color: black;
            padding: 14px 16px;
            text-decoration: none;
            display: block;
            border-bottom: 1px solid black;
            text-align: left;
        }        
        .dropdown-content a:hover {
            background-color: chocolate;
        }       
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>

    <ul>
        <li class="dropdown">
            <a href="" class="dropbtn">菜单一</a>
            <div class="dropdown-content">
                <a href="">栏目1</a>
                <a href="">栏目2</a>
                <a href="">栏目3</a>
                <a href="">栏目4</a>
            </div>
        </li>
        <!-- 此处省略剩下的菜单与栏目，与菜单一一致 -->

    </ul>
</body>

</html>