多级导航失效的根源是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"，其子菜单作为该

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

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

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

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • :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 脱离文档流，但若父

• 没设 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！