:has() 无法让导航栏自适应子菜单高度，因其仅用于条件匹配与样式切换，不触发布局重排；它可配合 max-height 实现平滑展开，但动态高度反馈需 JS 辅助。
为什么 :has() 不能直接让导航栏“自适应子菜单高度”
直接用 :has() 控制父容器（比如 .nav）的高度是无效的。CSS 中父元素高度不会因后代伪类状态（如 :has(ul:hover)）自动重排或重绘——:has() 只能用于**条件匹配与样式切换**，不触发布局计算。你看到的“导航栏变高”，其实是子菜单显示时自身占位导致的流式撑开，而非父元素被 :has() “主动拉伸”。
真正可控的是：用 :has() **提前感知子菜单是否展开**，从而切换父级或相邻元素的某些样式（如 padding、background、transform），营造视觉上的“跟随感”。
:has() 配合 max-height + overflow 实现平滑展开效果
子菜单本身需要过渡动画，而 height: auto 无法过渡，所以得用 max-height 模拟。此时 :has() 就能精准控制触发时机：
- 给导航项（
.nav-item）加:has(.submenu:is(:hover, :focus-within))，表示子菜单处于交互态 - 在该状态下，给
.submenu设置max-height: 300px（足够容纳内容）和opacity: 1 - 默认设
.submenu { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; } - 注意：
max-height值必须大于子菜单实际高度，否则会截断；若子菜单项数量不确定，建议设为足够大的值（如500px）或用 JS 动态写入
.nav-item .submenu {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.nav-item:has(.submenu:is(:hover, :focus-within)) .submenu {
max-height: 500px;
opacity: 1;
}
避免 :has() 在下拉菜单中误触发的三个关键点
下拉菜单常因鼠标移动间隙导致 :hover 断开、:has() 失效，造成闪烁或收起。这不是 :has() 的 bug，而是结构/时机问题：
立即学习“前端免费学习笔记（深入）”；
- 子菜单和触发按钮之间**不能有垂直间距**，否则移入空隙时
:hover中断 → 改用margin-top: 0或负margin衔接 -
:focus-within必须可用：确保子菜单内可聚焦元素（如<a href>或tabindex="0"的<div>），否则键盘用户无法维持展开态 - 移动端无
:hover，需额外用.nav-item[aria-expanded="true"]配合 JS 切换，:has([aria-expanded="true"])才能兼容触屏
当需要真实“动态高度反馈”时，:has() 不够用
如果你的需求是：导航栏背景要完全包裹“当前展开的子菜单区域”，包括它的全部高度（比如加阴影、圆角、渐变边框），纯 CSS 几乎做不到——因为父容器无法响应子元素运行时高度变化。
这时必须引入轻量 JS：
- 监听
mouseenter/focusin，读取.submenu.offsetHeight - 把该值写入
.nav-item的style.setProperty('--submenu-height', h + 'px') - CSS 中用
.nav-item:has(.submenu:is(:hover, :focus-within)) { padding-bottom: var(--submenu-height); }（仅作示意，实际需结合定位） - 更稳妥的做法仍是脱离文档流：子菜单用
position: absolute，父导航栏保持静态高度，视觉“跟随”靠定位和 z-index 实现
别指望 :has() 能替代 layout 计算——它是个选择器，不是钩子。
