layui原生layui-nav不支持三级及以上垂直嵌套，仅识别二级结构；必须改用dropdown.render或手动构造dom+css实现三级菜单。
直接说结论：layui 原生 layui-nav 不支持三级及以上垂直嵌套，必须换用 dropdown 或手动构造 dom + css 控制展开逻辑。
layui-nav 只能到二级，三级会塌陷或不渲染
很多人以为给 layui-nav-tree 里再套 <ul></ul> 就能实现三级，实际不行。Layui 的 layui-nav 渲染机制只识别一级 <li> 和其直接子 <dl></dl>（二级），再往下的 <ul></ul> 或 <dl></dl> 会被忽略或样式错乱。
- 典型现象：
console无报错，但第三级菜单始终不显示，或显示为平铺、重叠、错位 - 根本原因：
layui-nav的 CSS 选择器仅作用于.layui-nav .layui-nav-item > .layui-nav-child，不递归匹配更深层级 - 兼容性风险：即使强行加 CSS，不同 Layui 版本（2.5.x vs 2.8+）对
layui-nav-child的定位逻辑有差异，容易在移动端失效
用 dropdown.render 实现真正可交互的三级垂直菜单
dropdown 是 Layui 中唯一官方支持无限层级嵌套的组件，且天然适配垂直展开场景。关键不是“怎么写 HTML”，而是“怎么组织 data 结构”和“怎么控制触发方式”。
- 必须用
child字段递归定义子项，不能靠 HTML 嵌套；例如：{ title: '系统设置', child: [{ title: '用户管理', child: [{ title: '新增用户' }] }] } - 触发元素建议用
<span></span>或<a></a>，避免用<button></button>导致默认按钮样式干扰布局 - 设置
align: 'left'和offset: '0,4'可让下拉面板紧贴父项左侧垂直延伸，而非默认右偏移 - 点击回调中不要直接用
location.href跳转——三级菜单项可能只是分组标题，需判断data.child === undefined再执行跳转
手写垂直折叠菜单时，CSS 和 JS 的关键控制点
如果项目已重度依赖 layui-nav-tree 结构，又必须支持三级，可行但需绕过 Layui 渲染逻辑，纯手工控制显隐。
- HTML 中保留原结构，但所有三级
<ul></ul>加class="sub-menu-level3"并设display: none - 二级菜单项的
<a></a>后插入<i class="layui-icon layui-icon-down"></i>，用于绑定 click 事件 - JS 中监听二级项点击，用
$(this).next('.sub-menu-level3').slideToggle()，同时切换图标layui-icon-down/layui-icon-up - 务必阻止事件冒泡：
e.stopPropagation()，否则会触发父级layui-nav的默认折叠行为 - 注意：Layui 的
layui.use(['element'])会劫持所有.layui-nav-item的 click，需在element.init()后再绑定自定义事件
最容易被忽略的是：dropdown 的三级菜单在鼠标移出时默认自动关闭，但垂直导航往往需要“悬停保持展开”。这不能靠改配置解决，得用 setTimeout + clearTimeout 手动控制延迟关闭，且要区分鼠标进出子菜单区域——否则一碰空白就收起，体验极差。
