HTML嵌套列表通过<ul>或<ol>在<li>内嵌套实现多级目录结构，必须确保子列表置于<li>内部以保证语义正确，浏览器自动缩进渲染；可选details/summary、CSS伪类或JavaScript实现折叠交互，建议层级不超过3–4级并兼顾无障碍与移动端体验。

用 HTML 的嵌套列表就能实现分类目录的多级结构，核心是 <ul>（无序列表）或 <ol>（有序列表）的层级嵌套，配合语义清晰的 <li> 项来组织内容。

基础结构：一级套一级

每个子目录都放在上一级 <li> 标签内部，而不是平级排列。浏览器会自动缩进渲染，形成视觉层级：

• 电子产品
  • 手机
    • 安卓手机
    • iPhone
  • 笔记本电脑
    • 轻薄本
    • 游戏本
• 家居用品
  • 厨房用具
  • 清洁工具

保持语义正确：别把 <ul> 直接塞进 <ul>

<ul> 必须包裹在 <li> 里才能合法嵌套。下面这种写法是错误的：

<ul><li>A</li><ul><li>A1</li></ul></ul>

正确写法必须是：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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

<ul><li>A<ul><li>A1</li></ul></li></ul>

增强可读性与交互（可选）

纯 HTML 列表默认全部展开。如需折叠/展开效果，需配合 CSS 或 JavaScript：

• 用 details + summary 实现原生折叠（适合简单场景）
• 用 CSS 的 :hover 或 :focus-within 控制子菜单显示（免 JS）
• 用 JavaScript 绑定点击事件，动态切换 hidden 属性或 class（适合复杂交互）

注意事项

多级列表不是越深越好，通常建议控制在 3–4 级以内，避免用户迷失。同时注意：

• 用 aria-label 或 aria-labelledby 提升屏幕阅读器体验
• 避免纯靠缩进表达层级，关键节点可用图标或字体加粗辅助识别
• 移动端要考虑触控区域大小，子菜单触发区不宜过小