如何用纯 CSS 实现悬停后下拉菜单持续显示（含响应式支持）-html教程-PHP中文网

如何用纯 CSS 实现悬停后下拉菜单持续显示（含响应式支持）

本文详解如何通过 CSS 的 :hover 伪类与相邻兄弟选择器（+）配合，让下拉菜单在鼠标移入按钮及菜单区域时保持展开状态，避免因悬停中断导致菜单闪退，并兼顾移动端适配基础。

本文详解如何通过 css 的 `:hover` 伪类与相邻兄弟选择器（`+`）配合，让下拉菜单在鼠标移入按钮及菜单区域时保持展开状态，避免因悬停中断导致菜单闪退，并兼顾移动端适配基础。

要实现“悬停按钮后下拉菜单持续显示、鼠标可自由移入菜单内操作”的效果，核心在于扩展 hover 触发区域——不仅监听按钮的 :hover，还需监听下拉菜单自身的 :hover 状态，并确保两者状态叠加时菜单不关闭。

✅ 正确的 CSS 逻辑

关键在于使用 相邻兄弟选择器 + 和 双重 hover 条件：

/* 初始隐藏下拉菜单 */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 30px;      /* 根据按钮位置微调垂直偏移 */
  right: 0;        /* 与按钮右对齐（适配 fixed 布局） */
  background-color: whitesmoke;
  color: blue;
  width: 180px;    /* 推荐设具体宽度，避免响应式错位 */
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;   /* 确保层级高于其他元素 */
}

/* 按钮悬停 OR 下拉菜单自身悬停时，均显示菜单 */
#nosotros:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

⚠️ 注意：原代码中 .dropdown-menu 的 z-index: -1 会导致菜单被其他元素遮挡，必须改为正数（如 1000），否则即使显示也无法点击。

? HTML 结构要求（必须满足）

下拉菜单

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须紧邻触发按钮（即作为其直接相邻兄弟元素），才能被 #nosotros:hover + .dropdown-menu 正确选中：

<button class="main-menu-button" id="nosotros">Nosotros</button>
<div class="dropdown-menu" id="dropdown-nosotros">
  <h2 class="dropdown-title">Nosotros</h2>
  <button class="main-menu-second-button">Bienvenidos</button>
  <button class="main-menu-second-button">Misión y Visión</button>
  <button class="main-menu-second-button">Próximamente</button>
</div>

❌ 错误示例（插入了其他元素或换行空格过多可能破坏相邻关系）：

<button id="nosotros">Nosotros</button>
<!-- 空行或注释会破坏相邻兄弟关系 -->
<div class="dropdown-menu">...</div>

? 响应式增强建议

纯 CSS hover 方案在触摸设备（如手机）上默认失效（无 hover 概念），因此需补充基础适配：

添加 @media 查询，在小屏下将下拉菜单改为点击展开（需配合少量 JS）；
或采用更健壮的方案：用
/
语义化标签（原生支持 hover + 点击，且可无障碍访问）；
若坚持纯 CSS，至少为移动端提供 fallback：例如在 @media (max-width: 768px) 中取消 display: none，改用 max-height: 0 + overflow: hidden + transition 实现收起动画，并通过 :focus-within 支持键盘导航。