CSS - 下拉菜单

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

**设置尺寸：**在 CSS 中，可以使用 **padding**、**height** 和 **width** 属性来调整网页中下拉菜单的大小。
**定义颜色和边框：**建议使用与 UI 兼容的颜色和边框，并设置合适的厚度。可以使用 **background-color** 和 **border** 属性在 CSS 中设置颜色和边框。
**更改默认箭头：** 设置属性 “-webkit-appearance: none” 以删除默认箭头，并添加与网页主题匹配的自定义箭头图标。
**悬停效果：** 交互式样式，如悬停效果，可以在用户将鼠标悬停在下拉菜单上时更改其样式。这可能包括不透明度、颜色等的更改。
**响应式设计：** 使用 **媒体查询** 调整不同屏幕尺寸下的下拉菜单样式。

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

使用 CSS 设置下拉菜单样式

可以使用 HTML 中的 **<select>** 标签定义下拉菜单。当您点击下拉菜单时，它会展开以显示可用的选项，您可以通过点击其中一个选项来选择它。

在下面的示例中，我们应用了以下样式

首先，我们通过设置良好的字体样式并为 body 定义背景颜色来设置 body 的样式。我们使用 **CSS flexbox** 布局系统来居中下拉菜单元素。
然后，对于 select 元素，我们使用 **padding** 和 **width** 属性定义尺寸。我们分别使用 **border**、**background-color** 和 **border-radius** 属性设置边框、颜色和边框半径。
我们使用 “-webkit-appearance: none” 属性为 select 标签删除了默认的下拉菜单图标。我们使用 **伪元素** ::after 定义了自定义箭头。然后使用其他一些属性对齐其位置。
然后，我们为 select 元素添加了悬停效果和焦点效果。

示例

让我们来看一个例子。

<html lang="en">

<head>
    <style>
        /* Basic styles for the body */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            margin: 0;         
        }

        /* Container for the select element */
        .select-container {
            position: relative;
            width: 200px;
        }

        /* Styling the select element */
        .select-container select {
            width: 100%;
            padding: 10px;
            border: 2px solid #007bff;
            border-radius: 5px;
            background-color: #ffffff;
            color: #333333;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
        }

        /* Adding a custom arrow */
        .select-container::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 10px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #007bff;
            transform: translateY(-50%);
            pointer-events: none;
        }

        /* Hover effect for the select element */
        .select-container select:hover {
            border-color: #0056b3;
        }
        
        /* Focus effect for the select element */
        .select-container select:focus {
            border-color: #0056b3;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="select-container">
        <select>
            <option value="option1"> Option 1 </option>
            <option value="option2"> Option 2 </option>
            <option value="option3"> Option 3 </option>
        </select>
    </div>
</body>

</html>

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

我们使用了 **:hover 伪类** 为 **<select>** 标签创建悬停效果。

示例

让我们来看一个例子。此示例在下拉框内使用锚点标签，并设置其样式以适合带样式的下拉按钮。

<DOCTYPE html> 
<html>

<head>
    <style>
        .dropdown {
            position: relative; 
            display: inline-block; 
            height:200px;
        }
        .dropdown-button {
            background-color: #40a944; 
            padding: 15px; 
            border: none;
            cursor: pointer; 
            color: #ffffff; 
            margin: 0; 
            width: 162px;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            background-color: #fff;
            border: 1px solid #ccc; 
            padding: 0; 
            margin: 0;
            min-width: 160px; 
            list-style-type: 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">
        <button class="dropdown-button">Select an Option</button>

        <ul class="dropdown-menu">
            <li> <a>Option 1</a> </li>
            <li> <a>Option 2</a> </li>
            <li> <a>Option 3</a> </li>
        </ul>
    </div>
</body>

</html>

您可以通过将 **float: right** 样式应用到包含下拉菜单的容器来将下拉菜单放置在屏幕右侧。此安排将菜单移到屏幕的右侧。

示例

让我们来看一个例子。

<DOCTYPE html>
 <html>
<head>
    <style>
        .dropdown {
            position: relative; 
            display: inline-block; 
            float: right; 
            height:200px;
        }
        .dropdown-button {
            background-color: #40a944; 
            padding: 15px; 
            border: none;
            cursor: pointer; 
            color: #ffffff; 
            margin: 0; 
            width: 162px;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            background-color: #fff;
            border: 1px solid #ccc; 
            padding: 0; 
            margin: 0;
            min-width: 160px; 
            list-style-type: 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">
        <button class="dropdown-button">
            Select an Option
        </button>

        <ul class="dropdown-menu">
            <li> <a> Option 1 </a> </li>
            <li> <a> Option 2 </a> </li>
            <li> <a> Option 3 </a> </li>
        </ul>
    </div>
</body>

</html>

您可以通过在文本选项旁边包含图像来增强下拉菜单。当您将鼠标悬停在小图片或菜单按钮上时，会显示更大的图片以及描述。

示例

让我们来看一个例子。

<DOCTYPE html> 
<html>

<head>
    <style>
        body{
            height: 300px;
        }
        .dropdown {
            position: relative; 
            display: inline-block;
            height:200px;
        }
        .dropdown-img-menu {
            display: none; 
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .dropdown:hover .dropdown-img-menu {
            display: block;
        }
        .img-description {
            padding: 15px; 
            background-color: rgb(38, 222, 53);
            text-align: center;
        }
        p{
            border: 2px solid;
            padding: 10px;
            background: aqua;    
        }
    </style>
</head>

<body>
    <div class="dropdown">
        <p>Flowers</p>
        <div class="dropdown-img-menu">
            <img src="/css/images/red-flower.jpg" alt="Red Flower" 
                width="150" height="100">
            <div class="img-descripition">
                Beautiful Red Flower
            </div>

            <img src="/css/images/orange-flower.jpg" alt="Red Flower" 
                    width="150" height="100">
            <div class="img-descripition">
                Beautiful Orange Flower
            </div>
        </div>
    </div>
</body>

</html>

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

现在我们将应用我们的下拉菜单知识来使用 CSS 创建一个漂亮的导航栏。

示例

让我们来看一个例子。

<DOCTYPE html> 
<html>

<head>
    <style>
        .dropdown {
            height:200px;
        }
        ul {
            list-style-type: none; 
            margin: 0; 
            padding: 0; 
            overflow: hidden;
            background-color: #40a944;
        }
        li {
            float: left;
        }
        li a, .dropdown-option {
            display: inline-block; 
            color: white; 
            text-align: center; 
            padding: 14px 16px;
            text-decoration: none; 
            z-index: 99;
        }
        li a:hover,.dropdown:hover .dropdown-option {
            background-color: #82ea32;
        }

        li.dropdown {
            display: inline-block;
        }
        .dropdown-menu {
            display: none; 
            position: absolute; 
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            min-width: 160px; 
            background-color: #f9f9f9; z-index: 1;
        }
        .dropdown-menu a {
            color: black; 
            text-decoration: none; 
            display: block; 
            text-align: left;
        }
        .dropdown-menu a:hover {
            background-color: #82ea32;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
    </style>
</head>

<body>

    <h2>Dropdown Menu inside a Navigation Bar</h2>
    <ul>
        <li> <a>Tutorialspoints</a> </li>
        <li> <a>Home</a> </li>

        <li class="dropdown">
            <a class="dropdown-option"> Articles </a>
            <div class="dropdown-menu">
                <a>HTML</a>
                <a>CSS</a>
                <a>Bootstrap</a>
            </div>
        </li>
    </ul>

</body>

</html>

打印页面

CSS - 下拉菜单

目录

如何在 CSS 中设置下拉菜单样式？

使用 CSS 设置下拉菜单样式

示例

CSS 下拉菜单悬停效果

示例

CSS 右对齐下拉菜单

示例

CSS 带图片的下拉菜单

示例

CSS 下拉菜单导航栏

示例