纯CSS响应式多级菜单在Safari无法展开的问题排查与修复咨询

问题原因 #

你定位的:focus触发逻辑确实是问题核心：Safari对**非交互式元素（比如默认的<li>）**的:focus状态支持有特殊限制——这类元素默认无法通过点击获取焦点，必须手动设置tabindex属性才行。你的代码里没有给触发菜单的父元素添加焦点能力，导致点击时无法触发:focus，自然没法展开下拉菜单。

Safari CSS兼容性查询方式 #

可以通过MDN的CSS属性兼容性文档或Can I Use工具查询Safari对CSS属性的支持情况，重点关注选择器、焦点状态、动画类属性的兼容性细节。

仅修改CSS的修复方案 #

不需要改动HTML，只需调整触发菜单的CSS选择器，替换成Safari支持更好的:focus-within，同时保留:hover作为桌面端的 fallback：

// 修改后的菜单展开逻辑
&:hover,
&:focus-within {
  ~ ul {
    display: flex;
    transform-origin: top;
    animation: dropdown .2s ease-out;
  }
}

:focus-within的作用是：当元素本身或其内部任意子元素获得焦点时触发状态，Safari从10.1版本开始就支持这个属性，能覆盖绝大多数现代Safari用户。如果需要兼容更老的Safari版本，可以额外给触发元素添加tabindex="-1"（这一步需要改HTML，但如果严格只改CSS的话，:focus-within是最优解）。

内容的提问来源于stack exchange，提问作者shaaraa