使用 CSS 创建下拉导航栏

迈不过友情╰ 2023-10-01 17:18 29阅读 0赞

下拉菜单有一个可以通过单击选择的项目列表。我们可以使用 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>

#### 输出 ####

这是上述程序的输出。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_18_color_FFFFFF_t_70_g_se_x_16][]

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

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

<!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>

### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][] ###

### 结论 ###

我们可以使用 CSS 创建一个下拉列表。我们添加了 CSS :hover 类来显示下拉内容。我们可以使用 CSS 属性在导航栏中创建一个下拉菜单。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/502ae32a089640ec8346eb6a36f5657a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e12006c0f8b94b50981050cd23224693.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16