关键是用子选择器>精准限定作用域：.menu>li:hover>ul仅展开当前li的直接子ul，避免父容器hover波及兄弟项，并通过opacity/visibility过渡实现自然淡入效果。
要让 CSS 菜单在 :hover 时只展开当前项的子菜单，且不影响其他同级菜单项，关键是**精准限定作用范围**——只对「被 hover 的父项下的子菜单」生效，不波及兄弟元素或全局。
只作用于直接子菜单（最常用）
用 > 子选择器限定层级，确保只影响当前 下的
-
HTML 结构需规范：子菜单必须是父
的**直接子元素**（常见于下拉菜单） - CSS 写法示例：
.menu > li:hover > ul {
display: block; /* 或 visibility: visible; opacity: 1; */
}这样，只有鼠标悬停在某个 上时，它**紧挨着的子 的子菜单保持隐藏。
避免父级 hover 波及兄弟项
常见错误是把 :hover 写在容器（如 .menu）上，导致整个菜单区域悬停就全部展开。务必把 :hover 放在具体触发项（如 .menu > li）上：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.menu > li:hover > ul—— 每个li独立响应 - ❌ 错误：
.menu:hover ul—— 鼠标进菜单任意处，所有ul都可能显示
配合初始隐藏与过渡更自然
子菜单默认隐藏，并加简单过渡提升体验：
- 给子菜单设
display: none或visibility: hidden+opacity: 0 - 用
transition: opacity .2s, visibility .2s实现淡入（注意：display无法过渡，需搭配opacity或max-height） - 若用
opacity，记得同时控制visibility防止点击穿透
处理多层嵌套（可选）
如果需要二级菜单也支持 hover 展开，只需逐层写，不干扰一级逻辑：
.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
display: block;
}这样一级和二级各自独立响应，互不干扰。
基本上就这些。核心就是：用子选择器 > 锁定作用域，把 :hover 绑定到具体触发项，而非容器。不复杂但容易忽略层级关系。
