悬浮菜单需DOM嵌套结构支持，用.dropdown:hover .menu控制显隐；推荐opacity+transform过渡；移动端须JS响应点击并处理无障碍；z-index需配合定位与层叠上下文确保显示。
悬浮触发时 DOM 结构必须支持层级嵌套
纯 CSS 实现悬浮展开，前提是按钮容器能包裹所有下拉内容，否则 :hover 无法作用到“悬空”的子元素。常见错误是把按钮和菜单写在兄弟节点里，比如 <button></button><div class="menu"></div> —— 这样一移出按钮，菜单立刻消失。
正确结构必须是：
<div class="dropdown">
<button class="trigger">⋯</button>
<div class="menu">
<a href="#">导出 PDF</a>
<a href="#">复制链接</a>
</div>
</div>
然后用 .dropdown:hover .menu 控制显隐。如果用 JavaScript 控制显隐，也建议保持该嵌套结构，避免事件冒泡或焦点丢失问题。
用 transform + opacity 实现平滑过渡更可靠
直接用 display: none/block 无法加 transition；用 visibility 虽可过渡但不占布局空间，容易导致鼠标划过空白区时意外关闭。推荐组合：
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0+transform: translateY(-8px)隐藏 -
opacity: 1+transform: translateY(0)显示 - 同时设
transition: opacity 0.2s ease, transform 0.2s ease
这样既平滑，又避免因高度变化引发的布局抖动。注意要给 .menu 设 pointer-events: auto（默认继承），否则悬停期间可能无法点击子项。
移动端需额外处理点击穿透与焦点管理
纯 :hover 在 iOS 和 Android 大部分浏览器中不生效或延迟触发，且触摸设备没有“悬浮”概念。必须加 JavaScript 响应 click 或 touchstart：
- 给
.trigger绑定click，切换.menu的data-open属性或 class - 用
focusout或点击外部区域关闭（别只依赖blur，button本身不获得焦点） - 为无障碍考虑，加
aria-expanded和aria-haspopup="menu"
否则在 iPad 上点一次打开、再点一次才关闭，体验断裂；Safari 还可能因未阻止默认行为导致页面滚动。
避免 z-index 错乱导致菜单被遮挡
悬浮菜单常被轮播图、固定头部、模态框等盖住，根本原因是父容器设置了 z-index 但没形成新的层叠上下文。检查三点：
-
.dropdown父级是否意外设置了overflow: hidden或transform？这会截断子元素的 z-index 表现 -
.menu的z-index值是否足够高？建议设为1000起步，而非999（某些 UI 库已用掉） - 是否有
position: relative/absolute/fixed缺失？z-index只对定位元素生效
最稳妥做法：给 .menu 加 position: absolute + top: 100% + left: 0，并确保其最近的定位祖先（通常是 .dropdown）设了 position: relative。
真正难的不是展开动画，而是让菜单在各种嵌套场景、不同设备、焦点切换和 z-index 混战中稳定浮现——这些细节不写进 CSS，光靠“悬浮”两个字撑不起来。
