transition-delay 不继承，必须逐级显式设置；需用后代选择器配合 CSS 变量统一管理，并结合 opacity/visibility 实现平滑过渡，避免 display 切换中断动画。
transition-delay 不继承，必须每级显式设置
很多人以为给 .submenu 设个 transition-delay: 0.1s，二级、三级就会自动累加到 0.2s、0.3s——实际完全不会。CSS 的 transition-delay 不继承，也不链式叠加，子元素的延时必须单独写。
常见错误是只在一级下拉上设延迟，结果二级菜单“啪”一下就弹出来，毫无层次感。正确做法是逐层指定：
-
.menu-item:hover .submenu→transition-delay: 0.1s -
.submenu .menu-item:hover .submenu→transition-delay: 0.2s -
.submenu .submenu .menu-item:hover .submenu→transition-delay: 0.3s
注意选择器必须用后代选择器（空格），不能用子代选择器（>），否则三级菜单根本匹配不到。
用 CSS 变量统一管理延迟值，避免硬编码
手动写 0.1s / 0.2s / 0.3s 容易错、难维护。改用 CSS 变量可集中控制层级节奏：
在根或导航容器上定义：:root { --menu-level-1-delay: 0.1s; --menu-level-2-delay: 0.2s; --menu-level-3-delay: 0.3s; }
然后各级分别引用：.menu-item:hover .submenu { transition-delay: var(--menu-level-1-delay); }.submenu .menu-item:hover .submenu { transition-delay: var(--menu-level-2-delay); }
这样改节奏只需调一个变量，还能配合 JS 动态切换主题模式（比如深色模式下加快动画）。
延迟生效的前提：visibility + opacity，不是 display
display: none 切换会直接中断 transition，无论你写多少 transition-delay 都没用。浏览器根本不触发重绘流程。
必须用组合方案：
- 初始状态：
opacity: 0; visibility: hidden; - hover 状态：
opacity: 1; visibility: visible; - transition 写在默认样式里：
transition: opacity 0.2s ease, visibility 0.2s linear;
其中 visibility 的 linear 是关键——它让隐藏动作“立刻执行”，避免鼠标移开后还能点到半透明菜单；而 opacity 负责视觉渐变。
Safari 和旧 Edge 中 hover 链式延迟容易失效
iOS Safari（尤其是 15–16）和旧版 Edge 对嵌套 :hover 的重绘策略更激进，常出现“二级菜单跳过延迟直接弹出”或“三级压根不触发”的问题。
这不是代码写错了，是浏览器优化导致的渲染断连。缓解方式有：
- 给父级
.menu加will-change: transform;（仅对动画容器加，别滥用） - 确保子菜单 DOM 已挂载（不要用 JS 动态插入后再 hover）
- 降级兜底：对不支持多层 hover 的环境，用
:focus-within替代部分逻辑
最稳妥的做法仍是：桌面端用 hover + CSS 变量延迟，移动端改用 JS 绑定 click 或 touchstart，并加防抖。
真正难的不是写几行 transition-delay，而是让每一级都「在正确的时间、以正确的状态、被浏览器正确识别」——这三者缺一不可。变量只是工具，底层逻辑没理清，换再 fancy 的写法也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
