当前位置：首页 > news >正文

CSS 实现下拉菜单效果实例解析

news 文章来源：https://blog.csdn.net/weixin_45474825/article/details/145518004 2025/5/15 15:01:32

1. 引言

在 Web 开发过程中，下拉菜单是一种常见且十分实用的交互组件。很多前端教程都提供过简单的下拉菜单示例，本文将以一个简洁的实例为出发点，从 HTML 结构、CSS 样式以及整体交互逻辑三个层面进行详细解析，帮助大家理解纯 CSS 实现下拉菜单的基本原理。当你只依靠简单的 HTML 和 CSS，也可以实现响应式且美观的下拉菜单效果，无需借助 JavaScript。

2. 完整代码展示

下面给出完整示例代码，此文件命名为 0.html。

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}.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);
}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;
}.dropdown-content a:hover {background-color: #f1f1f1}.dropdown:hover .dropdown-content {display: block;
}.dropdown:hover .dropbtn {background-color: #3e8eff;
}
</style>
</head>
<body><h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="http://www.runoob.com">教程 1</a><a href="http://www.runoob.com">教程 2</a><a href="http://www.runoob.com">教程 3</a></div>
</div></body>
</html>

在这里插入图片描述

3. 代码解析

3.1 HTML 结构

整体结构
HTML 利用 <div class="dropdown"> 作为下拉菜单组件的容器，其中包含：
- <button class="dropbtn">：下拉菜单的触发按钮。
- <div class="dropdown-content">：包含下拉选项的区域，内嵌多个 <a> 标签，用于实现点击或链接跳转功能。
语义化优势
虽然此示例较为基础，但合理的标签划分能够保证页面结构清晰，易于维护，同时为后期添加更多交互如 JavaScript 补充功能打下基础。

3.2 CSS 样式及实现原理

按钮样式（.dropbtn）
```
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}
```
该部分定义了按钮的背景色、文字颜色、内边距及无边框样式，并通过 cursor: pointer 显示手型指针，提升用户交互体验。
容器样式（.dropdown）
```
.dropdown {position: relative;display: inline-block;
}
```
设置 position: relative 让内部绝对定位的元素（下拉内容）以此元素为参考，同时利用 display: inline-block 便于页面内布局的灵活安排。
下拉内容样式（.dropdown-content）
```
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
```
默认状态下设置 display: none 隐藏下拉内容，利用 position: absolute 控制其定位，使其能够悬浮在页面其他内容之上，并通过背景色和阴影效果来提升视觉层次感。
下拉选项样式（.dropdown-content a）
```
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;
}.dropdown-content a:hover {background-color: #f1f1f1}
```
每个选项通过设置内边距、文本颜色及取消下划线，确保文字清晰可读。当鼠标悬停到选项上时，背景色变化使得用户获得明显的视觉反馈。
交互显示逻辑
利用纯 CSS 的 :hover 伪类，实现了当鼠标悬停在 .dropdown 容器上时，显示下拉菜单内容：
```
.dropdown:hover .dropdown-content {display: block;
}.dropdown:hover .dropbtn {background-color: #3e8eff;
}
```
- 第一条规则使得 .dropdown-content 在鼠标悬停时变为 block，从而实现“展开”效果。
- 第二条规则则在鼠标悬停时改变按钮的背景颜色，进一步增强视觉提示，表明下拉菜单已激活。

4. 实现逻辑与优势

4.1 纯 CSS 的实现方式

通过纯 CSS 来实现下拉菜单，不仅代码量少，而且完全依赖浏览器的渲染机制，无需引入额外的 JavaScript 库，从而降低了前端整体的复杂性，非常适用于简单的导航或者需要保持轻量级页面的场景。

4.2 便于维护的代码结构

将 HTML 与 CSS 分离，可以让页面结构更清晰，同时样式可以被快速定位和修改。对于前端初学者来说，这种结构有助于理解页面布局与样式之间的关系，并为后续添加动态效果提供基础。

4.3 扩展性

虽然目前示例仅使用了 :hover 来控制显示隐藏，但借助 CSS 动画以及 JavaScript 事件绑定，可以轻松扩展功能：

点击触发：配合 JavaScript 控制菜单的展开与收起，适应移动端环境。
动画效果：利用 transition 或 animation 添加平滑过渡动画效果，进一步提升用户体验。

5. 总结

本文以一个简单的 HTML 与 CSS 下拉菜单示例为切入点，详细解析了组件的 HTML 结构、各部分 CSS 样式设定以及利用 :hover 实现的交互效果。通过这种纯 CSS 的实现方式，开发者可以快速构建出美观且响应迅速的交互组件，同时为后续更复杂的前端开发（如引入动画、增强点击效果）积累经验。

如果你对此示例有任何疑问或更好的优化方案，欢迎在评论区进行讨论，感谢阅读！

希望这篇博客文章能帮助你更好地理解如何通过简单的 HTML 与 CSS 实现下拉菜单效果。Happy Coding！

CSS 实现下拉菜单效果实例解析

1. 引言在 Web 开发过程中，下拉菜单是一种常见且十分实用的交互组件。很多前端教程都提供过简单的下拉菜单示例，本文将以一个简洁的实例为出发点，从 HTML 结构、CSS 样式以及整体交互逻辑三个层面进行详细解析，帮助大家理解纯 C…...

编程日记 2025/2/12 17:48:45

DeepSeek模拟阿里面试——Mysql

1.数据库基础知识关系型数据库是什么？ 关系型数据库是基于关系模型的数据库，使用表格来存储数据，表格之间可以通过键建立关系。数据库的ACID特性是什么？ 原子性（Atomicity）：事务要么全部完成…...

编程日记 2025/2/12 17:46:43

MVVM设计模式

‌MVVM（Model-View-ViewModel）是一种软件设计模式,MVVM模式由三个主要部分组成： ‌Model（模型）‌：负责管理应用程序的业务逻辑和数据。它不关心UI如何展示数据，主要负责与服务器通信和数据处处…...

编程日记 2025/2/12 17:43:39

解决：Cannot find a valid baseurl for repo: base/7/x86_64

传送门 repo_file/etc/yum.repos.d/CentOS-Base.repo cp ${repo_file} ~/CentOS-Base.repo.backup sudo sed -i s/#baseurl/baseurl/ ${repo_file} sudo sed -i s/mirrorlist.centos.org/vault.centos.org/ ${repo_file} sudo sed -i s/mirror.centos.org/vault.centos.org/ $…...

编程日记 2025/2/12 17:40:36

ffmpeg -codecs

1. ffmpeg -codecs -loglevel quiet 显示ffmpeg支持的编解码器 2. 输出选取部分结果： Codecs: D..... Decoding supported .E.... Encoding supported ..V... Video codec ..A... Audio codec ..S... Subtitle codec ...I.. Intra frame-only code…...

编程日记 2025/2/12 17:28:21

社区版IDEA中配置TomCat（详细版）

文章目录 1、下载Smart TomCat2、配置TomCat3、运行代码 1、下载Smart TomCat 由于小编的是社区版，没有自带的tomcat server，所以在设置的插件里面搜索，安装第一个（注意：安装时一定要关闭外网，小编因为这个…...

编程日记 2025/2/12 17:27:18

强化学习 DPO 算法：基于人类偏好，颠覆 PPO 传统策略

目录一、引言二、强化学习基础回顾（一）策略（二）价值函数三、近端策略优化（PPO）算法（一）算法原理（二）PPO 目标函数（三）代码示例&…...

编程日记 2025/2/12 17:26:16

长安链支撑全国不动产登记数据可信流通

转自人民日报客户端不动产登记事关亿万企业、家庭的切身利益。促进不动产登记数据安全流通、业务高效协同，是各方持续努力的目标。记者1月7日从国家区块链技术创新中心获悉，我国自主可控、性能领先的区块链软硬件技术体系长安链，支撑自然资…...

编程日记 2025/2/12 17:20:09

GitCode 助力 Dora SSR：开启游戏开发新征程

项目仓库（点击阅读原文链接可直达） https://gitcode.com/ippclub/Dora-SSR 跨越技术藩篱，构建游戏开发乐园 Dora SSR 是一款致力于打破游戏开发技术壁垒的开源游戏引擎。其诞生源于开发者对简化跨平台游戏开发环境搭建的强烈渴望&#xff0…...

编程日记 2025/2/12 17:18:05

获取 Windows 视频时长的正确方式——Windows Shell API 深度解析

在 Qt 开发中，有时需要获取视频文件的时长，最直接的方法是在 Windows 上使用 Windows Shell API。然而，这涉及到 IShellItem、IPropertyStore 等 COM 组件，并需要正确处理 PKEY_Media_Duration。本篇文章将详细解析 Windows Shell API 获取视频时长的正确实现方式，并解决常…...

编程日记 2025/2/12 17:10:55

Linux系统安装Nginx详解（适用于CentOS 7）

目录 1. 更新系统包 2. 安装EPEL仓库 3. 安装Nginx 4. 启动Nginx服务 5. 设置Nginx开机自启 6. 检查Nginx状态 7. 配置防火墙 8. 访问Nginx默认页面 9. 配置Nginx（可选） 10. 重启Nginx 解决步骤 1. 检查系统版本 2. 移除错误的 Nginx 仓库 …...

编程日记 2025/2/12 17:07:51

深入理解Java对接DeepSeek

其实，整个对接过程很简单，就四步，获取key，找到接口文档，接口测试，代码对接。 1.获取 KEY https://platform.deepseek.com/transactions 直接付款就是了（现在官网暂停充值2025年2月7日&#xf…...

编程日记 2025/2/12 17:05:49

flutter isolate到底是啥

在 Flutter 中，Isolate 是一种实现多线程编程的机制，下面从概念、工作原理、使用场景、使用示例几个方面详细介绍： 概念在 Dart 语言（Flutter 开发使用的编程语言）里，每个 Dart 程序至少运行在一个 Isol…...

编程日记 2025/2/12 17:02:45

深入剖析 Apache Shiro550 反序列化漏洞及复现

目录前言一、认识 Apache Shiro 二、反序列化漏洞：隐藏在数据转换中的风险三、Shiro550 漏洞：会话管理中的致命缺陷四、漏洞危害：如多米诺骨牌般的连锁反应五、漏洞复现：揭开攻击的神秘面纱 （一&#xff0…...

编程日记 2025/2/12 16:54:37

计算机毕业设计——Springboot的简历系统

📘 博主小档案： 花花，一名来自世界500强的资深程序猿，毕业于国内知名985高校。 🔧 技术专长： 花花在深度学习任务中展现出卓越的能力，包括但不限于java、python等技术。近年来，花花更…...

编程日记 2025/2/12 16:52:34

【kubernetes组件合集】深入解析Kubernetes组件之三：client-go

深入解析Kubernetes组件之三：client-go 目录深入解析Kubernetes组件之三：client-go 引言 1. client-go简介 2. client-go的功能 2.1 资源操作 2.2 资源监听 2.3 认证和授权 2.4 错误处理和重试 2.5 扩展性和定制化 3. 使用client-go与Kubern…...

编程日记 2025/2/12 16:48:29

线程池-抢票系统性能优化

文章目录引言-购票系统线程池购票系统-线程池优化池化 vs 未池化引言-购票系统 public class App implements Runnable {private static int tickets 100;private static int users 10000;private final ReentrantLock lock new ReentrantLock(true);public void run() …...

编程日记 2025/2/12 16:47:27

WebSocket 握手过程

文章目录 1. WebSocket 握手过程概述2. 客户端发送握手请求3. 服务器响应握手请求4. 客户端验证握手响应5. 建立 WebSocket 连接6. 安全性与注意事项7. 应用示例在现代 Web 开发中，WebSocket 协议因其高效的实时通信能力而被广泛应用。WebSocket 允许客户端和服务器…...

编程日记 2025/2/12 16:42:20

VMware 虚拟机 ubuntu 20.04 扩容工作硬盘

一、关闭虚拟机关闭虚拟机参考下图，在vmware 调整磁盘容量二、借助工具fdisk testubuntu ~ $ df -h Filesystem Size Used Avail Use% Mounted on udev 1.9G 0 1.9G 0% /dev tmpfs 388M 3.1M 385M 1% /run /dev/sda5 …...

编程日记 2025/2/12 16:40:17

备战蓝桥杯：二分算法之牛可乐和魔法封印问题

这道题就是一道简单的模板题，我们分析一下！，首先我们要找大于等于x的起始位置我们还是用两个指针，left指向1，right指向n，如果a[mid]<x left mid1 如果a[mid]>x 就让right mid 如果数组全是小于x…...

编程日记 2025/2/12 16:39:16

普通用户授权docker使用权限

1、检查docker用户组 sudo cat /etc/group |grep docker 若显示：docker:x:999: # 表示存在否则创建docker用户组： sudo groupadd docker2、查看 /var/run/docker.sock 的属性 ll /var/run/docker.sock 显示： srw-rw---- 1 root root 0 1月…...

编程日记 2025/2/12 16:31:06

【实战篇】DeepSeek + ElevenLabs：让人工智能“开口说话”，打造你的专属语音助手！

最近，AI语音合成技术真是火得不行，各种“开口脆”的AI声音层出不穷，听得我直呼“这也太像真人了吧！” 作为一个科技爱好者，我当然不能错过这股潮流，这不，最近就沉迷于用 DeepSeek 和 ElevenLabs 这两款神器，捣鼓各种人声音频，简直停不下来！先来科普一下这两位“主角…...

编程日记 2025/2/12 16:30:05

Vision Transformer：打破CNN垄断，全局注意力机制重塑计算机视觉范式

目录引言一、ViT模型的起源和历史二、什么是ViT？ 图像处理流程图像切分展平与线性映射位置编码 Transformer编码器分类头（Classification Head） 自注意力机制注意力图三、Coovally AI模型训练与应用平台四、ViT与图像…...

编程日记 2025/2/12 16:25:59

LabVIEW国内外开发的区别

LabVIEW作为全球领先的图形化编程平台，在国内外工业测控领域均占据重要地位。本文从开发理念、技术生态、应用深度及自主可控性四个维度，对比分析国内外LabVIEW开发的差异，并结合国内实际应用场景，探讨其未来发展趋势。一、开…...

编程日记 2025/2/12 16:23:56

【并发控制、更新、版本控制】.NET开源ORM框架 SqlSugar 系列

系列文章目录 🎀🎀🎀 .NET开源 ORM 框架 SqlSugar 系列 🎀🎀🎀 文章目录系列文章目录一、并发累计（累加）1.1 单条批量累计1.2 批量更新并且字段11.3 批量更新并且字段list中对应的…...

编程日记 2025/2/12 16:21:53

淘宝App交易链路终端混合场景体验探索

如何应对产品形态与产品节奏相对确定情况下转变为『在业务需求与产品形态高度不确定性的情况下，如何实现业务交付时间与交付质量的确定性』。我们希望通过混合架构（Native 业务容器 Weex 2.0）作为未来交易终端架构的重要演进方向&#xff0c…...

编程日记 2025/2/12 16:20:52

数据中心网络监控

数据中心是全球协作的特定设备网络，用来在internet网络基础设施上传递、加速、展示、计算、存储数据信息。对于任何利用IT基础设施的企业来说，数据中心都是运营的核心，它本质上为整个业务网络托管业务应用程序和存储空间。数据中心可以是任…...

编程日记 2025/2/12 16:17:43

【含开题报告+文档+PPT+源码】基于springboot的汽车销售管理系统的设计与实现

开题报告本论文聚焦于基于SpringBoot框架构建的汽车销售管理系统，该系统旨在赋能汽车销售企业实现一体化、智能化的业务运营与管理。管理员作为系统的核心员工群体，其功能权限深度集成并涵盖了登录认证、公告发布、人力资源调配、商品品牌管控、车辆信…...

编程日记 2025/2/12 16:14:38

flink cdc2.2.1同步postgresql表

目录简要说明前置条件maven依赖样例代码简要说明在flink1.14.4 和 flink cdc2.2.1下，采用flink sql方式，postgresql同步表数据，本文采用的是上传jar包，利用flink REST api的方式进行sql执行。前置条件 1.开启logical 确保你…...

编程日记 2025/2/12 16:11:33

rebase和merge

rebase 和merge区别： rebase变基，改变基底：rebase会抹去提交记录。 git pull 默认merge，git pull --rebase 变基 rebase C、D提交属于feature分支，是基于master分支，在B提交额外拉出来的，当…...

编程日记 2025/2/12 16:10:32