display:none无法实现下拉菜单动画，因其不可过渡；应使用opacity、transform和visibility组合：opacity控制淡入淡出，transform:scaleY()控制缩放，visibility防误触，过渡时间0.25s为佳。
直接用 display: none 切换下拉菜单，动画会失效——因为 display 不是可过渡属性。真正优雅的展开效果，靠的是 opacity、transform 和 visibility 的组合控制。
为什么 display 不能做过渡
浏览器无法对 display 的值（如 none ↔ block）进行插值计算，所以加了 transition 也没用，菜单只会“啪”一下出现或消失。
- 可用过渡的属性包括：
opacity、transform、height（需设具体数值）、visibility（配合延时控制） - 推荐核心组合：
opacity控制淡入淡出，transform: scaleY()或scale()控制缩放展开，visibility防止鼠标误触隐藏态元素
关键 CSS 写法示例
假设子菜单结构为 <li class="dropdown">
<a>Specialists</a><ul class="submenu">...</ul>
</li>：
- 父级
li.dropdown设position: relative - 子菜单
.submenu设：position: absolute; top: 100%; left: 0;opacity: 0; transform: scaleY(0.8); transform-origin: top;visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s; - 悬停时激活：
.dropdown:hover .submenu { opacity: 1; transform: scaleY(1); visibility: visible; transition-delay: 0s; }
避免常见错位与交互问题
下拉菜单飘走、点不中、闪退，往往不是动画问题，而是定位或触发逻辑没理清：
立即学习“前端免费学习笔记（深入）”；
- 子菜单必须嵌套在对应
<li>内部，不能提级到<nav></nav>或兄弟节点 -
:hover只作用于鼠标，移动端需额外考虑:focus-within或媒体查询适配 - 若用
height过渡，必须给.submenu设固定高度或max-height，否则无法插值 - 为防展开时遮挡下方内容，可加
z-index: 1000并确保父容器未设overflow: hidden
轻量响应式补丁
小屏幕下建议收起下拉，改用点击展开（需少量 JS），但纯 CSS 方案也可妥协处理：
- 用
@media (max-width: 768px)把.submenu设为position: static; opacity: 1; transform: none;，让它常驻显示 - 或配合
input[type="checkbox"] + label + ul结构，用伪类切换，完全免 JS - 所有过渡时间建议控制在 0.2s–0.3s，过长显拖沓，过短失质感
