nav和dropdown必须是两个独立block：nav仅负责语义与布局（nav__list、nav__item），dropdown封装完整交互逻辑（dropdown__toggle、dropdown__menu），DOM须同容器或紧邻，禁用nav__dropdown等跨块命名。
导航菜单用 BEM 命名，关键不是“怎么写类名”，而是“哪些该拆成独立 block”——nav 和 dropdown 必须分家，否则改一个 hover 动效就得重测整个导航结构。
nav 和 dropdown 必须是两个独立 block
很多人把下拉菜单写成 nav__dropdown 或 nav__submenu，这直接破坏了职责边界。nav 只管语义和布局（nav__list、nav__item、nav__link），而显隐控制、定位逻辑、过渡动效这些交互行为，全属于 dropdown 的责任范围。
DOM 结构必须满足：
-
nav__item内部只放一个dropdown实例，不写任何dropdown__相关样式规则 - 子级下拉菜单不是“二级嵌套元素”，而是另一个独立的
dropdown实例，直接放在上层dropdown__menu里 - 禁止出现
nav__item__dropdown、dropdown__menu__submenu这类跨 block 命名
.dropdown__toggle:hover + .dropdown__menu 失效怎么办
90% 的 hover 闪退不是 CSS 写错了，是 DOM 断链了。这个兄弟选择器要求 dropdown__toggle 和 dropdown__menu 在 HTML 中必须是紧邻兄弟节点，中间插一个 <transition>（Vue）、<Fragment>（React）或手写的 <div class="wrapper">，就会彻底失效。
立即学习“前端免费学习笔记（深入）”；
检查并确保结构符合以下任一模式：
-
<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 文件怎么拆才真模块化
模块化不是靠命名风格撑起来的，关键是文件组织能让人一眼看出“这个样式管哪块、能不能单独抽走”。nav.css 里不该塞颜色、字体、z-index、hover 动效，更不该混进下拉逻辑。
按职责切片：
-
nav.css：只含nav、nav__list、nav__item等容器与布局规则 -
nav-dropdown.css：仅当项目用到下拉时才引入，只定义dropdown块及其定位、过渡、z-index -
_nav-theme.css：抽成 CSS 自定义属性（--nav-bg、--nav-link-color），换肤不改结构 - 媒体查询统一交给
layout-responsive.css管理，否则响应式逻辑会和nav职责耦合
最常被忽略的一点：BEM 的类名长度不是问题，DOM 结构错位才是硬伤。哪怕你把所有类名都写对了，只要 dropdown__toggle 和 dropdown__menu 不在同一个父容器下、或者中间多了一层 wrapper，hover 就会失效——这不是 CSS 的锅，是结构没对齐 BEM 的前提假设。
