根本原因是未正确设置transition属性，导致:hover状态切换时无过渡动画；必须用height/max-height/opacity/transform等可动画属性，并显式声明transition-property、duration和delay。
为什么:hover二级菜单一碰就弹、收不回去？
根本原因是没加 transition，或者只写了 transition-duration 却漏了 transition-property 和 transition-delay。浏览器看到 :hover 状态切换，直接硬切高度或 visibility，没有中间帧。真机测试时尤其明显：手指划过就闪一下，松开立刻回弹，不是“延迟”，是“没过渡”。
- 必须用可动画属性：比如
height、max-height、opacity、transform；display: none/block不可动画，不能加 transition -
max-height比height更稳妥——不用精确预设子菜单高度，设个足够大的值（如max-height: 500px）再配overflow: hidden - 别依赖
visibility配transition：visibility 本身不可动画，只能靠 opacity + pointer-events 控制交互
怎么写才能让二级菜单“等一会儿再下拉”？
关键不是给 :hover 加 delay，而是给「菜单容器」的过渡属性加 transition-delay。它只对已声明在 transition 列表里的属性生效。
- 正确写法：
transition: max-height 0.3s ease 0.15s, opacity 0.3s ease 0.15s;—— 这里两个属性都带 150ms 延迟，且 duration 和 delay 都显式写出 - 错误写法：
transition-delay: 0.15s;单独写无效，因为没指定哪个属性过渡、持续多久 - hover 进入时：等 150ms → 开始展开动画；hover 离开时：同样等 150ms → 开始收起动画（双向生效）
- 如果想“进快出慢”或“进慢出快”，得拆成两组独立 transition 声明，但需 JS 配合 class 切换，纯 CSS 不支持单向 delay
移动端点击后菜单闪退，是:hover延迟没生效？
不是延迟失效，是触摸设备上 :hover 行为不可靠。iOS Safari 和 Android Chrome 在触摸后会模拟一次 hover，但紧接着触发 click，导致状态快速来回切换，transition-delay 被打断或跳过。
- 不要指望
@media (hover: hover)修复这个问题——它只是媒体查询，不改变事件触发逻辑 - 真机调试时，打开 DevTools 的 “Toggle device toolbar”，勾选 “Emulate hover”，能复现该问题
- 稳妥方案：用
pointer-events: none配合 JS 控制。默认禁用 hover，点击一级菜单时才给二级容器加pointer-events: auto并触发动画 class - 若坚持纯 CSS，至少加
will-change: transform;提升二级菜单图层，减少重排抖动
多个二级菜单想错峰展开，transition-delay 能搞定吗？
可以，但必须理解它的局限性：delay 是“从状态变化那一刻开始计时”，不是“从上一个动画结束开始”。鼠标快速划过时，后一个菜单的 delay 可能还没开始就被新 hover 覆盖。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：按 DOM 顺序给每个二级菜单设递增 delay，例如
.submenu-1 { transition-delay: 0.1s; }、.submenu-2 { transition-delay: 0.2s; } - 更可靠方案：放弃纯 hover，改用
@keyframes+animation-delay，配合 JS 触发animation-play-state控制启停 - 负值
transition-delay: -0.2s不是倒放，是“跳过前 200ms，直接显示动画进行到 200ms 时的样子”，适合做入场衔接，但别用来解决 hover 误触
最常被忽略的一点：transition-delay 的生效前提是元素在触发前后都有 layout —— 如果二级菜单初始 height: 0 且父容器 overflow: hidden，但没设 padding 或 border，某些浏览器会跳过渲染队列，导致 delay 彻底失效。加一行 min-height: 0; 或 font-size: 0; 强制 layout，比调 delay 值更治本。
