nav和dropdown必须是两个独立block，因nav只管语义结构与布局，dropdown专责交互行为（显隐、定位、过渡），二者职责分离才能避免样式耦合与测试爆炸。
复杂导航栏命名失控，根本不是类名写得不够长，而是没把交互边界当回事——nav 和 dropdown 必须是两个独立 block，不能靠嵌套前缀“模拟”层级。
nav 和 dropdown 为什么必须是两个独立 block
很多人写 nav__item__dropdown 或 nav__submenu，结果二级菜单改个动效，整个导航结构都要重测。因为这种命名把布局职责（nav）和交互职责（显隐、定位、过渡）硬捆在一起。
nav 只管语义结构和整体布局：它定义 nav__list、nav__item、nav__link 这些直接子元素；所有下拉行为相关 DOM（触发按钮、面板、内部列表）必须包裹在 dropdown 实例里，哪怕它出现在 nav__item 内部。
-
nav__item内只放一个dropdown元素，不写任何dropdown相关样式规则 - 子级下拉菜单不是“二级子项”，而是另一个
dropdown实例，只是它的触发位置嵌套在上层nav__item中 - 要用修饰符区分差异（如
dropdown--secondary），而不是靠父级前缀（如nav__item__dropdown）
hover 闪退、菜单消失快的真正原因
90% 的 hover 失效不是 CSS 写错了，是 DOM 结构破坏了 BEM 对兄弟/父子关系的假设。比如 .dropdown__toggle:hover + .dropdown__menu 断链，往往是因为中间插了 Vue 的 <transition></transition>、React 的 Fragment，或手写的 <div class="wrapper">。
<ul>
<li>确保 <code>dropdown__toggle 和 dropdown__menu 是相邻兄弟节点，或 dropdown__menu 是 dropdown__toggle 的直接子级/父级
:has() 可以绕过兄弟限制，但注意 Safari 15.4+、Chrome 105+ 才稳定支持dropdown__menu 加 min-width: max-content，防止内容收缩后鼠标移出热区remove() dropdown__menu，改用 display: none 或 visibility 控制显隐多级嵌套时怎么避免命名爆炸
写到三级菜单就开始出现 nav__item__submenu__link？这是结构失焦的明确信号。BEM 不允许跨 block 命名，所以不存在“三级”这个概念——只有多个 dropdown 实例依次嵌套在不同 nav__item 中。
- 一级菜单：
<li class="nav__item"> <a>产品</a><div class="dropdown"></div> </li> - 二级菜单：在上层
dropdown__menu里再放一个<div class="dropdown"></div>，不是dropdown__submenu - 所有
dropdown共享基础样式，差异用 modifier 解决，例如dropdown--mega、dropdown--inline - 不要用
nav__dropdown--level-2这类伪层级命名，它会让样式逻辑无法复用
最常被忽略的点是：BEM 的“块”不是按视觉位置切分，而是按**是否可独立存在、是否拥有完整交互生命周期**来判断。一个能单独挂载、销毁、测试的下拉菜单，就是独立 block ——哪怕它视觉上嵌在另一个菜单项里。
