:hover菜单点击即消失是因为悬停中断，需用父容器包裹并设置position:relative锚定定位，移动端必须用JS切换class实现兼容。
hover 触发的菜单为什么点一下就消失了
因为 :hover 只监听鼠标悬停，一旦移开就立刻失效。常见错误是把菜单放在触发元素下方、中间有空隙，鼠标一移过去就断连，菜单闪退。这不是 bug，是 CSS 行为本身如此。
- 菜单容器必须和触发元素在 DOM 中相邻或包裹关系，推荐用父容器包裹触发按钮 + 菜单，再对父容器写
:hover .menu - 避免用绝对定位把菜单“甩”到远处，导致鼠标移动路径中脱离触发区域
- 如果菜单需要点击交互（比如带链接或按钮），
:hover不够用，得加 JS 监听mouseenter/mouseleave或切换 class
纯 CSS 实现时 display 和 visibility 的区别
display: none 会彻底从布局流中移除，动画无法过渡；visibility: hidden 保留占位但不可见，配合 opacity 才能做淡入淡出。多数情况下，用 opacity + pointer-events: none 更稳妥。
- 别对
display写 transition —— 它不支持过渡，CSS 会直接跳变 - 想实现淡入：用
opacity: 0→opacity: 1，同时配transition: opacity 0.2s - 必须禁用指针事件，否则即使透明，菜单仍会拦截鼠标，导致 hover 失效：
opacity: 0; pointer-events: none;
移动端 hover 不生效怎么办
绝大多数触摸设备（iOS/Android）不触发 :hover，除非用户“模拟悬停”（比如长按），但这不可靠。别指望纯 CSS hover 在手机上稳定展开菜单。
- 真要兼容移动端，必须用 JS 切换 class，比如点击时加
is-open，再用.menu.is-open控制显示 - 如果坚持用 CSS，可尝试
@media (hover: hover) and (pointer: fine)做媒体查询隔离，只对支持 hover 的设备启用该逻辑 - 注意 Safari 在某些模式下会延迟触发 hover，或只在第一次触摸后才激活，行为不一致
菜单内容溢出或定位错位的典型原因
菜单突然出现在页面左上角、或者被父容器裁剪，大概率是定位上下文没理清。CSS 的 position: absolute 是相对于最近的 position: relative/absolute/fixed 祖先，不是按钮本身。
立即学习“前端免费学习笔记（深入）”；
- 给触发按钮的父容器加
position: relative，这是最安全的锚点 - 菜单本身设
position: absolute; top: 100%; left: 0;，确保贴在按钮正下方 - 检查父容器是否有
overflow: hidden，它会裁掉超出部分，改成overflow: visible或移除 - 避免在菜单上设
transform（如scale），它会创建新的层叠上下文，影响 z-index 表现
