悬停显示子菜单的 CSS 实现方法

本文深入讲解了如何利用现代 CSS 的 `:has()` 伪类优雅实现“悬停父项显示同级子菜单”这一长期困扰前端开发者的布局难题——当子菜单与触发项在 DOM 中为平级而非嵌套关系时，传统选择器束手无策，而 `:has()` 以声明式、纯 CSS、零 JavaScript 的方式精准破局；文章不仅给出开箱即用的核心代码和视觉优化技巧（如结合 `opacity`/`visibility` 实现丝滑过渡、`absolute` 定位提升可控性），还贴心提供了浏览器兼容性现状及旧版回退方案，是构建高性能、可维护响应式导航菜单的必读实践指南。

本文详解如何使用现代 CSS `:has()` 伪类实现父级菜单项 hover 时显示同级子菜单，解决传统相邻/后代选择器无法跨层级匹配的难题，并提供兼容性替代方案。

在构建响应式导航菜单时，一个常见需求是：当用户将鼠标悬停在「Categories」主菜单项上时，动态显示其对应的下拉子菜单（.categories-ul）。但你遇到的问题很典型——子菜单与触发项不在 DOM 树的嵌套关系中（即 .categories-ul 并非 .categories 的子元素或直接后代），而是同级兄弟元素，因此传统 CSS 选择器（如 .categories:hover .categories-ul）完全失效。

✅ 正确解法：使用 :has() 伪类（推荐）

CSS :has() 是一项突破性特性，允许基于后代、兄弟或子元素的状态来选择祖先或同级元素。本例中，我们需在