CSS 下拉菜单 - 易学教程，面试笔记经验！

下拉菜单是一个包含选项列表的用户界面元素。它允许用户通过将鼠标悬停或单击触发元素来从列表中选择一个值。它通常用于网站的导航菜单、表单和其他交互式组件。

下拉菜单是使用 HTML 的无序列表创建的 (<ul>) 和列表项 (<li>) 元素。

本章将介绍如何利用 CSS 来设计样式和排列下拉菜单元素，控制其外观和行为。

CSS 下拉菜单: 基本示例

让我们看一个简单的下拉列表示例，其中包含选项。当您将鼠标悬停在"选择选项"文本上时，会出现一个包含选项的下拉菜单。

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        margin: 0;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <span class="dropdown-button">选择选项</span>
        <div class="dropdown-menu">
            <p>Option 1</p>
            <p>Option 2</p>
            <p>Option 3</p>
        </div>
    </div>
</body>
</html>

在上面的示例中:

使用任何 HTML 元素（例如 <span> 或 <button>）来打开下拉内容。
要创建下拉内容或菜单，请使用容器元素（例如<div>)
使用 CSS 正确包装和定位下拉内容。
.dropdown 类使用 position :relative。此属性将下拉菜单放置在下拉按钮的正下方（使用 position:absolute）。
.dropdown -menu 类保存实际的下拉内容。默认情况下隐藏，悬停时显示。
CSS box-shadow 属性使下拉菜单看起来像卡片。
:hover 选择器在以下情况下显示下拉菜单:用户将鼠标移到下拉按钮上。

CSS 下拉菜单: 可悬停效果

可悬停下拉菜单是一种用户界面元素，当用户将光标悬停在触发元素上。当用户将光标移离触发元素时，下拉菜单通常会消失。

让我们看一个例子。此示例在下拉框中使用锚标记，并设置它们的样式以适合样式化的下拉按钮:

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">选择选项</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉菜单: 展开选项

当您单击下拉列表时，它会展开以显示可用选项，您可以通过单击来选择其中一个选项。

让我们看一个示例:

<html>
<head>
<style>
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;

    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
    .show {
        display: block;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">选择选项</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const button = document.querySelector('.dropdown-button');
            const dropdownContent = document.querySelector('.dropdown-menu');

            button.addEventListener('click', function () {
                dropdownContent.classList.toggle('show');
            });

            window.addEventListener('click', function (event) {
                if (!event.target.matches('.dropdown-button') && dropdownContent.classList.contains('show')) {
                    dropdownContent.classList.remove('show');
                }
            });
        });
    </script>
</body>
</html>

CSS 下拉菜单: 右对齐菜单

您可以通过将 float: right 样式应用于包含下拉菜单的 <div> 来将下拉菜单放置在屏幕右侧。这种安排将菜单移至屏幕的右侧。

让我们看一个例子:

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown" style="float: right;">
        <button class="dropdown-button">选择选项</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉菜单: 左对齐菜单

您可以通过添加 float: left 来实现左对齐下拉菜单样式为包含下拉菜单的 <div>。这种排列将菜单移至屏幕的最左侧。

让我们看一个示例:

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-button {
        background-color: #e81a1a;
        padding: 15px;
        border: none;
        cursor: pointer;
        color: #ffffff;
        margin: 0;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .dropdown-menu li {
        padding: 10px;
        background-color: #15AD39;
    }
    .dropdown-menu li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #82ea32;
    }
</style>
</head>
<body>
    <div class="dropdown" style="float: left;">
        <button class="dropdown-button">选择选项</button>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</body>
</html>

CSS 下拉菜单: 使用图片

您可以增强通过在文本选项旁边包含图像来下拉菜单。当您将鼠标悬停在图像上时，会出现更大尺寸的图像以及说明。

让我们看一个示例:

<html>
<head>
<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-img-menu {
        display: none;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;

    }
    .dropdown:hover .dropdown-img-menu {
        display: block;
    }
    .img-descripition {
        padding: 15px;
        background-color: rgb(38, 222, 53);
        text-align: center;
    }
</style>
</head>
<body>
    <div class="dropdown">
        <img src="/css/images/red-flower.jpg" alt="" width="200" height="100">
        <div class="dropdown-img-menu">
            <div class="img-descripition">Red color flower</div>
            <img src="/css/images/red-flower.jpg" alt="" width="300" height="150">
        </div>
    </div>
</body>
</html>

CSS 下拉菜单: 使用导航

下拉导航栏常见于网站导航菜单中。它由一个包含链接列表的水平条组成。当用户将鼠标悬停在特定链接上或单击特定链接时，会出现一个下拉菜单，显示其他导航选项或与所选链接相关的内容。

让我们看一个示例:

<html>
<head>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #208926;
    }
    li {
        float: left;
    }
    li a,
    .dropdown-option {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover,
    .dropdown:hover .dropdown-option {
        background-color: #f39a1d;
    }

    li.dropdown {
        display: inline-block;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: #44e2d5;
        border: 1px solid #ccc;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 120px;
    }
    .dropdown-menu a {
        color: black;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    .dropdown-menu a:hover {
        background-color: #ee3131;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Yxjc123</a></li>
        <li><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-option">Articles</a>
            <div class="dropdown-menu">
                <a href="#">HTML</a>
                <a href="#">CSS</a>
                <a href="#">Bootstrap</a>
            </div>
        </li>
    </ul>
</body>
</html>

CSS 下拉菜单 dropdown

CSS 下拉菜单: 基本示例

CSS 下拉菜单: 可悬停效果

CSS 下拉菜单: 展开选项

CSS 下拉菜单: 右对齐菜单

CSS 下拉菜单: 左对齐菜单

CSS 下拉菜单: 使用图片

CSS 下拉菜单: 使用导航