菜单 hover 平滑过渡需在常态元素设 transition 指定属性、时长与缓动；下拉菜单用 opacity+transform+visibility 替代 display；移动端需用媒体查询或 js 补充交互；避免 transition 失效的三大坑及系统偏好适配。
hover 触发时菜单项颜色和背景如何平滑过渡
直接给 :hover 加 color 或 background-color 不会动，必须配合 transition 声明才生效。关键不是“有没有 hover”，而是“过渡哪些属性、用什么时长、什么缓动”。
-
transition要写在常态（非 hover）的元素上，比如.nav-item { transition: color 0.2s ease, background-color 0.2s ease; } - 避免写成
transition: all 0.3s—— 容易意外触发 layout 变化（如 height、margin 改变），导致卡顿或重排 - 如果背景从透明变色，确保常态下
background-color设为transparent，而不是留空（留空等于initial，可能被解析为white）
下拉子菜单如何用 transition 实现淡入滑入效果
纯 :hover + display: none/block 无法过渡，因为 display 不是可动画属性。得换用 opacity 和 transform 配合 visibility 控制显隐。
- 初始状态：设
opacity: 0、transform: translateY(-10px)、visibility: hidden - hover 父级时：子菜单设
opacity: 1、transform: translateY(0)、visibility: visible - 过渡只写在子菜单本身：
transition: opacity 0.25s ease, transform 0.25s ease; - 注意：不能只靠
opacity，否则仍占布局空间；visibility是必要补充
移动端 touch 设备上 :hover 不生效怎么办
iOS Safari 和部分 Android 浏览器对 :hover 有延迟或禁用逻辑——不是 bug，是规范行为。单纯依赖 :hover 的菜单在手机上大概率点不动。
