使用 CSS 创建下拉导航栏

下拉菜单有一个可以通过单击选择的项目列表。我们可以使用 HTML 元素和 CSS 创建一个下拉列表。所以，让我们学习创建一个下拉菜单。创建下拉列表可以使用<div>容器和<button>标签来创建下拉菜单以切换下拉菜单。该<a>标签用于在 <div> 中创建链接列表。使用position:absolute下拉菜单和position:relative下

allway2

5117人浏览 · 2022-02-06 10:31:34

allway2 · 2022-02-06 10:31:34 发布

下拉菜单有一个可以通过单击选择的项目列表。我们可以使用 HTML 元素和 CSS 创建一个下拉列表。所以，让我们学习创建一个下拉菜单。

创建下拉列表

可以使用<div>容器和<button>标签来创建下拉菜单以切换下拉菜单。该<a>标签用于在 <div> 中创建链接列表。

使用position:absolute下拉菜单和position:relative下拉内容，以便下拉菜单位于按钮下方。
使用box-shadow属性像卡片一样自定义下拉菜单。
当用户将鼠标放在菜单上时，使用:hover类打开显示菜单。
下拉菜单默认使用隐藏display:none。

示例：使用 CSS 创建下拉列表

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
        <style>
            .dropdown-btn {
                background-color: #df4356;
                color: black;
                padding: 16px;
                font-size: 20px;
                border: none;
            }
            .dropdown {
                position: relative;
                display: inline-block;
            }
            .dropdown-menu {
                display: none;
                position: absolute;
                background-color: white;
                min-width: 150px;
                box-shadow: 5px 16px 16px 8px rgba(0,0,0,0.4);
                z-index: 1;
            }
            .dropdown-menu a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }
            .dropdown-menu a:hover {
                background-color: #cccccc;
            }
            .dropdown:hover .dropdown-menu {
                display: block;
            }
        </style>
    </head>
    <body>
        <h2> Dropdown</h2>
        <div class="dropdown">
            <button class="dropdown-btn">Dropdown</button>
            <div class="dropdown-menu">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </div>
    </body>
</html>

输出

这是上述程序的输出。

示例：在导航栏中添加下拉菜单

我们还可以在导航栏中创建一个下拉菜单。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
        <style>
            .navbar {
                overflow: hidden;
                background-color: black;
            }

            .navbar a {
                float: left;
                font-size: 16px;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            .dropdown {
                float: left;
                overflow: hidden;
            }


            .dropdown .btn {
                font-size: 16px;
                border: none;
                outline: none;
                color: white;
                padding: 14px 16px;
                background-color: inherit;
                font-family: inherit;
                margin: 0;
            }

            .navbar a:hover, .dropdown:hover .btn {
                background-color: gray;
            }

            .dropdown-menu {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;

            }

            .dropdown-menu a {
                float: none;
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

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

            .dropdown:hover .dropdown-menu {
                display: block;
            }
        </style>
    </head>
    <body>
        <h2> Dropdown in navbar </h2>
        <div class="navbar">
            <a href="#home">Home</a>
            <a href="#news">News</a>
            <div class="dropdown">
                <button class="btn">Dropdown</button>
                <div class="dropdown-menu">
                    <a href="#">courses</a>
                    <a href="#">Menu</a>
                    <a href="#">Link </a>
                </div>
            </div>
        </div>

    </body>
</html>