CSS Style Dropdowns

2025 年 1 月 22 日 | 4 分钟阅读

基本下拉菜单

这个简单的下拉菜单示例演示了当用户将鼠标悬停在某个元素上时显示的下拉框的开发。CSS 用于样式，HTML 用于下拉菜单的结构。

示例 1

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.dropdown {
            position: relative;
            display: inline-block;
        }

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

.dropdown:hover .dropdown-content {
            display: block;
        }
</style>
</head>
<body>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>

输出

示例 2

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parentClass {
            position: relative;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }

.childClass {
            top: 0;
            left: 0;
            opacity: 0.7;
            width: 200px;
            height: 150px;
            background: yellow;
            position: absolute;
        }
</style>
</head>
<body>
<div class="parentClass">
<div class="childClass">
<h2>Element 2</h2>
<p>position: absolute;</p>
</div>
</div>
</body>
</html>

输出

示例 3

在此示例中，两个子元素堆叠在父元素之上。每个子元素都有自己的定位设置。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parentClass {
            position: relative;
            background: cyan;
            width: 80vw;
            margin: 8vw 10vw;
            height: 200px;
        }

.childClass {
            opacity: 0.8;
            height: 150px;
            width: 190px;
            background: yellow;
            position: absolute;
            top: 0;
        }

.child1 {
            left: 0;
        }

.child2 {
            left: 155px;
        }
</style>
</head>
<body>
<div class="parentClass">
<div class="childClass child1">
<h2>Element 1.1</h2>
<p>position: absolute;</p>
</div>
<div class="childClass child2">
<h2>Element 1.2</h2>
<p>position: absolute;</p>
</div>
</div>
</body>
</html>

输出

下拉菜单

下拉菜单示例扩展了基本下拉菜单，并在下拉框中加入了链接。它涵盖了下拉按钮、链接和整体悬停效果的样式。

示例

样式下拉按钮和内容

<!DOCTYPE html>
<html lang="en">
<head>
<style>
        /* Style The Dropdown Button */
.dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* The container <div> - needed to position the dropdown content */
.dropdown {
            position: relative;
            display: inline-block;
        }

        /* Dropdown Content (Hidden by Default) */
.dropdown-content {
            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;
        }

        /* Links inside the dropdown */
.dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* Change the color of dropdown links on hover */
.dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        /* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
            display: block;
        }

        /* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>

输出

右对齐下拉内容

.dropdown-content {
    right: 0;
}

下拉样式技术

本节深入探讨了下拉菜单的 CSS 样式技术，并提供了更多示例来展示下拉菜单设计的通用性。

示例 1

样式下拉框的外观

<!DOCTYPE html>
<html lang="en">
<head>
<style>
        select {
            appearance: none;
            outline: 0;
            background: green;
            background-image: none;
            width: 100%;
            height: 100%;
            color: black;
            cursor: pointer;
            border: 1px solid black;
            border-radius: 3px;
        }

.select {
            position: relative;
            display: block;
            width: 15em;
            height: 2em;
            line-height: 3;
            overflow: hidden;
            border-radius: .25em;
            padding-bottom: 10px;
        }
</style>
</head>
<body>
<center>
<div class="select">
<select name="slct" id="slct">
<option>Computer Science Subjects</option>
<option value="1">Operating System</option>
<option value="2">Computer Networks</option>
<option value="3">Data Structure</option>
<option value="4">Algorithm</option>
<option value="5">C programming</option>
<option value="6">JAVA</option>
</select>
</div>
</center>
</body>
</html>

输出

示例 2

浏览器特定样式和过渡

<!DOCTYPE html>
<html lang="en">
<head>
<style>
        h1 {
            color: green;
        }

        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            outline: 0;
            background: green;
            background-image: none;
            border: 1px solid black;
        }

.select {
            position: relative;
            display: block;
            width: 20em;
            height: 3em;
            line-height: 3;
            background: #2C3E50;
            overflow: hidden;
            border-radius: .25em;
        }

        select {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0 0 0 .5em;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.25s ease;
        }

select::-ms-expand {
            display: none;
        }

.select::after {
            content: '\25BC';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 0 1em;
            background: #34495E;
            pointer-events: none;
            transition: color 0.25s ease;
        }

.select:hover::after {
            color: #F39C12;
        }
</style>
</head>
<body>
<center>
<div class="select">
<select name="slct" id="slct">
<option>Computer Science Subjects</option>
<option value="1">Operating System</option>
<option value="2">Computer Networks</option>
<option value="3">Data Structure</option>
<option value="4">Algorithm</option>
<option value="5">C programming</option>
<option value="6">JAVA</option>
</select>
</div>
</center>
</body>
</html>

输出

结论

网页开发者必须精通 CSS 下拉菜单样式。借助直观的自定义选项，您可以轻松优雅地创建更复杂的下拉菜单或简单的下拉菜单。

开发人员可以使用提供的示例作为起点，探索和发挥下拉菜单设计的创意。由于 CSS 仍然是 Web 开发中的基础技术，掌握这些样式技术有助于创建引人入胜且用户友好的界面。

下一主题Css-scrollbar-inside-div

CSS Style Dropdowns

基本下拉菜单

示例 1

示例 2

示例 3

下拉菜单

示例

右对齐下拉内容

下拉样式技术

示例 1

示例 2

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Style Dropdowns

基本下拉菜单

示例 1

示例 2

示例 3

下拉菜单

示例

右对齐下拉内容

下拉样式技术

示例 1

示例 2

结论

相关帖子

CSS Scrollbar inside Div

CSS Reference Sheet

CSS RGBA

如何旋转 CSS 中的图片

CSS Form Styling

CSS Border Opacity Benefits

HTML CSS Playground

如何使用 CSS 创建全屏背景图片

Removing Underline from the Link in CSS

CSS Profile Login

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器