transition-delay 不继承，需用后代选择器逐级显式设置并配合 css 变量统一管理；避免 display: none，改用 visibility + opacity 组合；优先使用 transform + opacity 替代 max-height 实现流畅过渡。
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 变量统一管理 delay 值，避免硬编码
手动维护 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) -
.submenu .submenu .menu-item:hover .submenu→transition-delay: var(--menu-level-3-delay)
这样调节奏只需改变量，还能配合 JS 动态切换主题模式（比如深色模式下加快动画）。
别用 display: none，改用 visibility + opacity 组合
display: none 会导致 transition 中断，因为元素在 DOM 中不可见、无尺寸、无法触发过渡。真正起作用的前提是：子菜单必须已渲染、可见（至少 opacity: 0 + visibility: visible），且有可过渡属性变化。
推荐组合写法：
- 初始状态：
visibility: hidden; opacity: 0; - 展开状态：
visibility: visible; opacity: 1; - 过渡声明：
transition: opacity 0.25s ease, visibility 0.25s step-end;
注意：visibility 本身不可动画，但加 step-end 能让它在 opacity 过渡结束时才切换，避免鼠标误触空白区。
max-height 过渡卡顿？优先换 transform + opacity
max-height 过渡常卡顿或收不干净，根本原因是它依赖浏览器估算高度，而 max-height: auto 不可动画，你必须硬写一个“够用但不过量”的值——内容一变就失效，移动端 WebKit 表现尤其差。
更稳的替代方案是纯 transform + opacity：
- 初始：
transform: scaleY(0); opacity: 0; visibility: hidden; transform-origin: top; - 展开：
transform: scaleY(1); opacity: 1; visibility: visible; - 过渡：
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
务必检查父级是否用了 transform（如 scale(0.95)），否则 transform-origin: top 会偏移，导致缩放中心错位。
多级菜单最复杂的点不在写法，而在 hover 断连和移动端适配——鼠标从一级移到二级时那点空隙，会让 :hover 状态瞬间丢失，max-height 方案直接闪退；而触摸设备上 :hover 仅模拟一次，紧接着触发 click，delay 往往被跳过。这些不是样式没写对，而是交互模型本身有局限。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
