nav 和 dropdown 必须是两个独立 block，nav 仅负责语义与布局，dropdown 封装完整交互逻辑；dom 结构需确保 toggle 与 menu 同属一个 dropdown 容器，否则 hover 闪退、状态失效。
nav 和 dropdown 必须是两个独立 block
这不是命名风格问题，而是职责边界问题。把下拉菜单写成 nav__dropdown 或 nav__submenu，等于把交互逻辑（显隐、定位、过渡）硬塞进布局块里，后续改一个动效就得重测整个导航结构。
正确做法是：nav 只管语义和布局（nav__list、nav__item、nav__link），dropdown 是完整可复用的 block，封装 dropdown__toggle 和 dropdown__menu。哪怕它嵌套在 nav__item 内部，DOM 也必须是：<li class="nav__item"><div class="dropdown"></div></li>，而不是 <li class="nav__item"><div class="nav__dropdown"></div></li>。
-
nav__item内只放一个dropdown实例，不写任何dropdown__相关样式规则 - 二级菜单不是“子项”，而是另一个
dropdown实例，直接放在上层dropdown__menu里 - 差异靠修饰符解决，比如
dropdown--mega、dropdown--click，而非nav__item__dropdown
.dropdown__toggle:hover + .dropdown__menu 失效怎么办
90% 的 hover 闪退不是 CSS 写错了，是 DOM 断链了。这个选择器要求两个元素必须是紧邻兄弟节点，中间插一个 <transition></transition>（Vue）、<fragment></fragment>（React）或手写的 <div class="wrapper">，就会彻底失效。
<p>检查 HTML 结构是否满足以下任一条件：</p>
<ul>
<li>
<code><button class="dropdown__toggle"></button><div class="dropdown__menu"></div>（相邻兄弟）
<div class="dropdown">
<button class="dropdown__toggle"></button><div class="dropdown__menu"></div>
</div>（同父级包裹）<div class="dropdown"><div class="dropdown__menu"><button class="dropdown__toggle"></button></div></div>（直接父子，需配合 :has()，注意 Safari 15.4+/Chrome 105+ 才稳定）补救措施：
- 给
dropdown__menu加min-width: max-content，防内容收缩后鼠标移出热区 - 加
transition-delay: 0.1s到dropdown__menu的opacity或transform上，缓解视觉断连 - JS 控制显隐时用
display: none或visibility: hidden，别用remove()
CSS 文件怎么拆才真模块化
模块化不是光靠命名，关键是文件组织得让人一眼看出“这个样式管哪块、能不能单独抽走”。把导航相关样式从全局 base.css 里拎出来，按功能切片：
-
nav.css：只含nav、nav__list、nav__item等容器和布局规则，不含颜色、字体等皮肤层，也不含hover、z-index等交互层 -
nav-dropdown.css：仅当项目用到下拉时才引入，里面只定义dropdown块及其动画、定位、z-index、过渡属性 -
_nav-theme.css：抽成 CSS 自定义属性（--nav-bg、--nav-link-color），换肤不改结构 - 媒体查询统一交给
layout-responsive.css管理，否则响应式逻辑会和nav职责耦合
多级菜单命名爆炸怎么破
出现 nav__item__submenu__link 这种类名，说明结构已经失焦。BEM 不允许跨 block 嵌套命名，“三级”不是层级深度，而是多个 dropdown 实例按需嵌套的结果。
一级菜单：<li class="nav__item">产品<div class="dropdown"></div>
</li>
二级菜单：<div class="dropdown__menu"><li class="nav__item">分类<div class="dropdown"></div>
</li></div>
关键点：
- 所有下拉 DOM 必须包裹在
dropdown容器内，禁止散落在nav__item子节点中 - 子级下拉仍是独立
dropdown，不是nav__item__dropdown或dropdown__menu__submenu - 如果需要不同动效或
z-index，直接加dropdown--secondary这类修饰符，而不是靠父级前缀区分
真正容易被忽略的是：BEM 的约束力不在类名长度，而在 DOM 包裹关系——只要 dropdown__toggle 和 dropdown__menu 不在同一个 dropdown 容器里，再规范的类名也救不了 hover 闪退和状态失效。
