dropdown 必须是独立 block，不可嵌套在 nav__item 中，否则导致 hover 失效、状态难维护、样式权重混乱；正确结构应为相邻兄弟或同父包裹，确保 CSS 选择器可靠生效。
nav 和 dropdown 必须是两个独立 block，不能靠 nav__item__dropdown 这类嵌套命名“假装”层级。 否则 hover 失效、状态难维护、改一个动效就得全链路回归测试。
为什么 dropdown 不能塞进 nav__item 里写样式
nav 只管语义结构和布局（nav__list、nav__item、nav__link），而下拉的触发、定位、显隐、过渡全是交互逻辑，属于 dropdown 自己的职责。强行把 dropdown__menu 的样式规则写在 nav__item 下，等于让布局块承担交互责任。
- 常见错误现象：
nav__item__dropdown类名出现，或.nav__item .dropdown__menu这种跨块选择器 - DOM 结构失焦：下拉 DOM 散落在
nav__item子节点中，而非包裹在dropdown容器内 - 后果：CSS 权重混乱、hover 断链（
.dropdown__toggle:hover + .dropdown__menu失效）、多级菜单无法递归复用
正确的 HTML 结构与 DOM 关系
dropdown__toggle 和 dropdown__menu 必须满足 CSS 选择器可依赖的邻接或父子关系，否则纯 CSS hover 显隐大概率失效。
- 推荐结构一（相邻兄弟）：
<button class="dropdown__toggle"></button><div class="dropdown__menu"></div> - 推荐结构二（同父包裹）：
<div class="dropdown"> <button class="dropdown__toggle"></button><div class="dropdown__menu"></div> </div> - 慎用结构三（依赖 :has()）：
<div class="dropdown"><div class="dropdown__menu"><button class="dropdown__toggle"></button></div></div>—— 需确认 Safari 15.4+ / Chrome 105+ 环境 - 务必给
dropdown__menu加min-width: max-content，防止内容收缩后鼠标移出热区闪退
多级菜单不是“三级命名”，而是递归复用
写到 nav__item__submenu__link 就该停手——这不是层级深，是结构失焦。BEM 不靠类名深度表达嵌套，而靠 DOM 层级 + 独立 block 实现递归。
- 一级菜单：
<li class="nav__item">产品<div class="dropdown"></div> </li> - 二级菜单：在上层
dropdown__menu内部再放一个<div class="dropdown"></div>，不是dropdown__submenu - 差异靠修饰符解决：
dropdown--mega、dropdown--click、dropdown--inline，而不是nav__item__dropdown--level-2 - 所有 dropdown 共享基础样式，避免为每级重复写规则，提升 CSS 缓存效率
最易被忽略的一点：框架（Vue <transition></transition>、React Fragment）或手写 wrapper 很容易在 dropdown__toggle 和 dropdown__menu 之间插入无关节点，直接破坏 BEM 对 DOM 关系的假设。检查真实渲染后的 HTML，比看源码更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
