nav和dropdown必须是两个独立block，而非命名风格问题：nav仅负责语义结构与布局（nav__list、nav__item），dropdown自主管理触发、定位、显隐及动效；所有下拉dom须包裹在dropdown容器内，禁止跨块嵌套或散落于nav__item子节点中。
nav 和 dropdown 必须是两个独立 block
这不是命名风格问题，而是职责划分的硬性边界。把下拉菜单写成 nav__dropdown 或 nav__submenu，等于把交互逻辑（显隐、定位、过渡）强行塞进布局块里，后续改一个动效就得重测整个导航结构。
正确做法是：用 nav 管语义和布局（nav__list、nav__item、nav__link），用独立的 dropdown 块封装触发与面板（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>、<fragment></fragment> 或手写的 <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到opacity或transform上缓解视觉断连 - JS 控制显隐时用
display: none或visibility: hidden，别用remove()
多级菜单命名爆炸怎么破
出现 nav__item__submenu__link 这种类名，说明结构已经失焦。BEM 不允许跨 block 嵌套命名，“三级”不是层级深度，而是多个 dropdown 实例按需嵌套的结果。
一级菜单：<li class="nav__item">产品<div class="dropdown"></div>
</li>
二级菜单：<div class="dropdown__menu"><li class="dropdown__item"><div class="dropdown"></div></li></div>
所有 dropdown 共享基础样式，变体靠修饰符区分：
-
dropdown--nested：用于二级及以上，控制缩进、箭头方向、z-index -
dropdown--inline：横向展开，替代默认垂直定位 - 避免
nav__dropdown--level-2这类伪层级命名，它会让样式无法复用
nav.css 里不该塞什么
模块化不是起个好名字就完事，关键是文件职责清晰。把样式按功能切片，才能真正解耦。
nav.css 只负责容器与布局：
- 只含
nav、nav__list、nav__item等结构规则 - 不含颜色、字体、hover 效果、z-index、动画
- 不写媒体查询——响应式逻辑交给
layout-responsive.css统一管理
nav-dropdown.css 按需引入：
- 仅当项目用到下拉时才加载
- 只定义
dropdown块的定位、过渡、显隐逻辑
皮肤层抽成 _nav-theme.css，用 CSS 自定义属性（--nav-bg、--nav-link-color）管理，换肤不改结构。
最易被忽略的是：nav 和 dropdown 的 DOM 关系一旦松动，所有基于 BEM 的样式约定都会失效——它不是语法问题，是结构契约。
