浏览器默认支持ul任意深度嵌套并自动缩进，但超3层易引发可访问性、维护性及移动端交互问题；应优先用details/summary替代，或通过class显式分层、css重置list-style-type、添加aria-label等保障语义与体验。
嵌套 ul 时浏览器默认会缩进，但深度没限制
HTML 标准对 ul 嵌套层数没有硬性限制，浏览器能正常渲染几十层——但这不等于该这么做。实际中超过 3 层嵌套就容易引发可访问性问题（如屏幕阅读器跳读困难）、CSS 维护成本陡增，以及移动端触控目标过小。
常见错误是把层级逻辑全压给 HTML 结构，比如用 ul > li > ul > li > ul 表达“分类 > 子类 > 属性”，结果后期要加图标或折叠功能时，CSS 选择器写成 ul ul ul li 难以定位且易误伤。
- 用语义化标签（如
details/summary）替代纯ul实现可折叠菜单 - 若必须多层
ul，建议用 class 区分层级：<ul class="menu-level-1"></ul>、<ul class="menu-level-2"></ul> - 避免用
ul ul ul这类无修饰的选择器写样式，优先用.menu-level-2显式控制
ul 嵌套后 list-style-type 会自动降级
浏览器对嵌套 ul 有默认样式继承逻辑：外层 ul 是 disc，内层自动变成 circle，再内层变成 square——这是 CSS 2.1 规定的行为，不是 bug。
但这个“自动降级”不可靠：Safari 有时会跳过第二层，Edge 可能复用第一层样式。如果设计要求第三层必须是小方块，不能依赖浏览器自动推导。
- 显式重置每层样式：
ul ul { list-style-type: circle; } ul ul ul { list-style-type: square; } - 用
list-style-image替代list-style-type可完全自定义，但要注意图片加载失败时的回退 - 若用 CSS 自定义标记（
::marker），注意 Safari 目前不支持嵌套ul中的::marker精确控制
用 JavaScript 动态生成深层 ul 要防无限递归
常见场景是把树形数据（如文件目录、权限菜单）转成嵌套 ul。最容易踩的坑是递归函数没设终止条件，遇到循环引用直接栈溢出。
比如后端返回的 JSON 里 parent_id 指向自己，或父子关系配置错位，renderList(items) 就会无限调用自身。
- 递归前加深度计数器：
if (depth > 6) return document.createTextNode("[max depth reached]"); - 用 Set 记录已处理的
id，遇到重复 ID 立即跳出 - 服务端应校验树结构合法性，前端只做兜底，不承担主责
无障碍（a11y）要求下，深层 ul 必须配 aria-labelledby 或 aria-label
屏幕阅读器对嵌套 ul 的播报逻辑是：读完父 li 文本后，自动进入子 ul，但不会说明“这是第几级菜单”。用户听到一串无上下文的列表项，极易迷失。
单纯加 role="menu" 不够，它只改变角色类型，不提供层级提示。
- 每层
ul加aria-label="二级导航"或aria-labelledby关联标题元素 - 用
aria-expanded控制折叠状态，并同步更新aria-hidden属性 - 测试时用 VoiceOver 或 NVDA 打开，听是否能清晰分辨“主菜单 > 产品 > 云服务 > API 文档”这样的路径
