多级导航失效的根源是HTML结构错误：子菜单必须作为父li的直接子元素嵌套，且父li需加class="has-submenu"并设position: relative；CSS需用:hover（桌面）或:checked（移动端）配合媒体查询隔离，子菜单用position: absolute、top: 100%、z-index变量控制层级，缩进与箭头用CSS变量动态生成，并补全aria-expanded等可访问性属性。

HTML结构必须用嵌套

表达父子关系

多级导航失效的根源几乎总是 HTML 结构错误：把所有菜单项写成平级

，没用子

包裹下级项。浏览器和 CSS 无法凭空识别“Link 2 下面有 Link A”，必须靠 DOM 层级来推导。

正确写法是每个可展开项加 class="has-submenu"，其子菜单作为该

• 的直接子元素
  出现：

  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li class="has-submenu">
      <a href="#">Products</a>
      <ul class="submenu">
        <li><a href="#">Web Tools</a></li>
        <li class="has-submenu">
          <a href="#">Design</a>
          <ul class="submenu">
            <li><a href="#">Figma Plugins</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  • 子菜单 <ul class="submenu"> 必须是父
  • 的**直接子节点**，不能是兄弟节点
  • 箭头符号（▼ / ▶）建议用伪元素 ::after 实现，避免干扰语义和屏幕阅读器
  • 移动端若用 checkbox 控制展开，class="has-submenu" 要同时用于触发 JS 或 :checked 逻辑

  :hover 和 :checked 两种触发方式怎么选

  纯 CSS 实现多级导航，主要靠 :hover（桌面）或 :checked（移动端汉堡菜单），二者不能混用同一套样式规则，否则在混合设备上会冲突。

  • :hover 适合桌面端，写法简洁：.menu li.has-submenu:hover > .submenu { display: block; }，但 iOS Safari 对非元素的 :hover 支持不稳定，慎用于点击区域小的项
  • :checked 依赖隐藏 <input type="checkbox"> + label 关联，适合移动端；注意子菜单的 display 切换必须基于父级 checkbox 的状态，例如：input#toggle-2:checked ~ .menu li:nth-child(2) .submenu { display: block; } —— 这种写法易出错，推荐用相邻兄弟选择器 + 或通用兄弟选择器 ~ 配合明确 ID
  • 如果要兼顾触屏与悬停，得用媒体查询隔离：@media (hover: hover) and (pointer: fine) 包裹 :hover 规则，其余设备回落到 :checked

  定位和 z-index 容易导致子菜单被遮挡

  子菜单默认用 position: absolute 脱离文档流，但若父

  
  Html2md
  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
  下载
  • 没设 position: relative，它会相对于最近的定位祖先定位，常导致偏移或消失。

    立即学习“前端免费学习笔记（深入）”；

    • 每个 li.has-submenu 必须声明 position: relative
    • 子菜单 .submenu 推荐用 top: 100% + left: 0 对齐父项底部左缘，避免因字体渲染差异错位
    • z-index 值不要硬写数字，用 CSS 变量统一管理层级，比如：--z-nav: 100; --z-submenu: calc(var(--z-nav) + 1);
    • 若导航栏本身用了 transform（如 translateZ 或 scale），可能创建新的 stacking context，导致子菜单 z-index 失效——此时需在父容器加 transform: translateZ(0) 或改用 will-change: transform

    移动端缩进和箭头提示要靠 CSS 变量+伪元素控制

    无限嵌套时，光靠 margin-left 不够灵活，且难以对齐箭头和文字基线。用 CSS 变量驱动缩进和指示符更可控。

    • 定义层级变量：.submenu { --level: 1; }，子级写成 .submenu .submenu { --level: 2; }
    • 缩进用 padding-left: calc(var(--level) * 1.5rem)，比固定值适配性更好
    • 箭头统一用 ::before 或 ::after，内容根据层级动态变化：.has-submenu > a::after { content: "▶"; }，二级以上可加 .submenu .has-submenu > a::after { content: "▷"; }
    • 别忘了用 aria-expanded 和 aria-haspopup="menu" 补全可访问性，JS 切换时同步更新这些属性

    真正卡住人的不是写几层嵌套，而是某一级

  • 忘了加 position: relative，或者媒体查询里漏写了子菜单的 display: none，结果桌面端正常、手机端全展开堆在一起——这种问题必须逐层 inspect 元素 computed 样式，而不是反复改 HTML。