纯html多级菜单必须用嵌套结构，因屏幕阅读器、tab键序和aria-expanded同步均依赖dom层级；子须为父直接子元素，配合nav[aria-label]、aria-haspopup、role="menu"等属性确保可访问性。
纯 HTML 在线运行环境（如 JSFiddle、CodePen、JSBin）里写多级菜单，核心不是“能不能跑”，而是“结构一错，键盘和读屏就废”。必须用 <ul></ul> 嵌套，不能靠 <div> + CSS 定位硬凑。
<h3>为什么 <code><ul></ul> 嵌套是唯一靠谱的结构
屏幕阅读器、Tab 键顺序、aria-expanded 同步，全依赖 DOM 层级关系。如果子菜单是独立 <div class="submenu"> 放在页面底部，再用 CSS <code>position: absolute 拉上去，会导致：
- Tab 焦点跳过子菜单项（因为 DOM 不在父
<li>内） - VoiceOver 朗读成“列表，2 个项目”，却不提“这是‘产品’下的子菜单”
-
aria-expanded="true"无法自动同步——你得手写 JS 绑定，而在线运行环境往往禁用或限制 JS 执行
<ul></ul> 嵌套的正确写法长什么样
关键就三点：子菜单 <ul></ul> 必须是父 <li> 的**直接子元素**，父 <li> 加 class="has-submenu" 标记，箭头符号仅作视觉提示。
<nav aria-label="主菜单"><ul class="menu">
<li><a href="/home">首页</a></li>
<li class="has-submenu">
<a href="/products">产品 ▼</a>
<ul class="submenu">
<li><a href="/products/web">Web 应用</a></li>
<li class="has-submenu">
<a href="/products/mobile">移动应用 ▶</a>
<ul class="submenu">
<li><a href="/products/ios">iOS</a></li>
<li><a href="/products/android">Android</a></li>
</ul>
</li>
</ul>
</li>
</ul></nav>
注意：<ul class="submenu"></ul> 必须紧贴在 <a></a> 后面，不能包在 <span></span> 或 <div> 里，否则 CSS <code>:hover > .submenu 会失效。
纯 CSS 控制显示，不依赖 JS 的要点
在线运行环境常禁用 JS，所以得靠 :hover 或 :checked。但 :hover 在触摸设备上无效，:checked 需要隐藏 checkbox —— 二者选哪个，看你要支持什么场景：
- 只跑桌面端预览：用
.has-submenu:hover > .submenu { display: block; } - 要兼顾移动端点击展开：必须用
<input type="checkbox" id="sub-1">+<label for="sub-1"></label>+input:checked ~ .submenu { display: block; }，且<input>和<label></label>必须相邻，中间不能插空格或换行（HTML 压缩后更安全） - 别用
visibility: hidden或opacity: 0隐藏子菜单——它们仍占布局空间或允许聚焦，应始终用display: none
容易被忽略的可访问性硬要求
在线运行环境里最容易漏掉、但 Lighthouse 或 axe 插件立刻报错的三项：
- 外层必须包
<nav aria-label="主菜单"></nav>，不能只写<nav></nav>—— 否则读屏软件不知道这是导航区 - 每个带子菜单的
<a></a>必须加aria-haspopup="true"和aria-expanded="false"，展开后 JS 或伪类要同步改aria-expanded值（纯 CSS 无法自动改，所以推荐用 checkbox 方案，配合[id^="sub-"]选择器做样式隔离） - 子菜单
<ul class="submenu"></ul>必须有role="menu"，每个子项<li>下的<a></a>加role="menuitem"，否则键盘按 ↓ 无法进入子菜单
结构不对，再多动画效果都是障眼法；可访问性属性漏一项，菜单在真实用户手里就等于不存在。
