后台侧边栏菜单应采用语义化嵌套 ul/li 结构，用 checkbox+label 实现无 JS 展开，CSS 通过 padding-inline-start 控制缩进，配合 aria-level 和响应式收起，确保可访问性与 SEO。
后台管理系统侧边栏的层级菜单结构，核心是语义正确、缩进清晰、可访问性强，且不依赖 JavaScript 实现基础展开逻辑。
用嵌套 ul/li 构建语义化层级
每级菜单必须用 <ul> 嵌套在上一级 <li> 内部，形成自然的父子关系：
-
<nav>包裹整个菜单区域，声明这是主导航区 - 一级菜单项为
<ul>的直接子<li> - 子菜单作为对应
<li>的最后一个子元素，即<li><a>系统管理</a><ul><li><a>角色管理</a></li></ul></li> - 避免平铺所有菜单项再用 JS 或 CSS 模拟层级——这会破坏键盘 Tab 顺序和读屏器播报
纯 CSS 控制缩进，不靠 class 或内联样式
缩进必须由结构驱动，而非数据字段或硬编码类名：
- 用
ul ul或li > ul选择器统一设置padding-inline-start: 24px（兼容 RTL） - 禁用
text-indent：它只缩进首行，对 inline 元素行为不可控 - 避免
margin-left：易受外边距折叠影响，且焦点框位置可能偏移 - 若需视觉强化，可叠加不同颜色的
border-left，层级越深颜色越浅
无 JS 展开收起：用 checkbox + label 实现状态控制
兼顾触摸设备、SEO 和 SSR 场景，比 :hover 更可靠：
立即学习“前端免费学习笔记（深入）”；
- 每个可展开项前加隐藏
<input type="checkbox" id="menu-1"> - 用
<label for="menu-1">设置</label>作为点击区域 - 子
<ul>紧跟<label>后，用input:checked ~ ul控制显隐 - 子菜单默认
display: none，激活时设为display: block，确保真实脱离文档流
响应式与可访问性兜底
小屏和辅助技术场景不能妥协：
- 移动端用
@media强制收起所有子菜单：.submenu { display: none !important; } - 所有
<a>必须有明确 href 或 role="link"，禁用<div onclick> - 为每级
<ul>添加aria-level属性（如aria-level="2"），不用于样式，仅辅助朗读 - 确保键盘 Tab 可依次进入每项，
Enter或Space触发 checkbox 切换
