CSS响应式二级导航：hover与focus-within控制显隐

:focus-within 本身不控制显隐，它只是条件。你得配合 display: none / opacity / visibility 才行。但这里有个关键矛盾：用 display: none 会让屏幕阅读器完全忽略内容；而全用 opacity: 0 又可能被误点（尤其移动端）。

推荐组合：visibility: hidden + opacity: 0 + pointer-events: none 作为默认状态；激活时改为 visibility: visible + opacity: 1 + pointer-events: auto。这样既保证可访问性（visibility 不影响语义树），又防止误触。

.nav-item {
  position: relative;
}
.nav-item ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s step-end;
}
.nav-item:focus-within ul,
.nav-item:hover ul {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

键盘用户需要 tab 键顺序进入二级菜单，别卡死在一级项