多层嵌套导航混乱的根本原因是未重置默认样式和定位行为；必须统一设置margin:0、padding:0、list-style:none、position:relative；子菜单需absolute定位并精确控制top/left；移动端应避免纯嵌套结构，改用带ARIA属性的button触发折叠。
多层 <ul></ul> 嵌套时导航结构混乱的根本原因
不是嵌套本身出问题，而是没控制好 <ul></ul> 的默认样式和定位行为。浏览器对 <ul></ul> 会自动加外边距、内边距、列表符号，且子 <ul></ul> 默认是块级流式布局——一旦没重置或脱离文档流，就会撑开父容器、错位、缩进异常。
必须重置的 4 个 CSS 属性（不写这几句，嵌套必乱）
在导航最外层 <ul></ul> 及所有子 <ul></ul> 上统一设置：
-
margin: 0;—— 清除浏览器默认外边距（尤其<ul></ul>顶部/底部的空白） -
padding: 0;—— 清除左侧默认缩进（这是子菜单“向右偏移”的主因） -
list-style: none;—— 去掉圆点/数字，避免干扰视觉对齐 -
position: relative;—— 为子<ul></ul>的绝对定位提供参照（下一层关键）
<ul></ul> 子菜单如何精准悬停显示（不遮挡、不抖动）
子 <ul></ul> 必须用 position: absolute; 脱离文档流，否则会参与父级高度计算，导致整个导航栏上下跳动。常见错误是只设 top: 100%; 却忽略 left 定位：
nav ul li:hover > ul {
display: block;
position: absolute;
top: 100%; /* 紧贴父 <li> 底部 */
left: 0; /* 左侧对齐父 <li> 左边框，非文本起点 */
min-width: 200px; /* 防止内容窄时被压缩 */
}注意：left: 0 是对齐父 <li> 的左边界，不是整个导航栏；若需子菜单居中对齐父项，改用 left: 50%; transform: translateX(-50%);。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
移动端多层折叠菜单的 DOM 结构陷阱
别用 <ul><li><ul><li>...</li></ul></li></ul> 这种纯嵌套结构直接做手风琴菜单——屏幕阅读器无法识别层级关系，且 JS 控制展开/收起时容易误触父级事件。正确做法是：
- 每个可展开的
<li>内，用<button></button>作为触发器（带aria-expanded） - 子
<ul></ul>放在同级，用aria-labelledby关联按钮 - 用
display: none / block切换，而非visibility: hidden（后者仍占空间）
复杂点在于：子菜单的 z-index 必须高于兄弟元素，否则会被上层导航项遮住；而过度提升 z-index 又可能影响模态框等全局组件——得按层级收敛管理，不能全设 9999。
