在后台系统或企业门户中，导航往往不止一层。顶部是模块，鼠标移上去出现二级菜单，某些二级项还能展开三级操作。这种多层嵌套导航栏如果用纯CSS实现，核心是解决定位上下文、显示切换与层叠顺序三个问题。下面通过一个三级导航示例，说明从结构到样式的完整做法。
一、HTML结构规划
嵌套导航本质是有序或无序列表的层层包含。最外层ul代表主导航，每个li内部再放一个ul作为子菜单。这样语义清晰，也方便用CSS后代选择器控制显示。
需要注意，子菜单ul默认应该隐藏，不能占用文档空间。如果直接写死display:none，虽然隐藏了，但后面要用hover显示时无法做过渡。推荐用visibility与opacity组合控制，后面样式部分会解释。
<nav class="multi-nav">
<ul class="nav-level-1">
<li class="has-child">
<a href="javascript:void(0);">系统管理</a>
<ul class="nav-level-2">
<li class="has-child">
<a href="javascript:void(0);">用户管理</a>
<ul class="nav-level-3">
<li><a href="javascript:void(0);">新增用户</a></li>
<li><a href="javascript:void(0);">用户列表</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">角色配置</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">报表中心</a></li>
</ul>
</nav>
二、基础布局与定位上下文
主导航用flex横向排列，这样无论几个一级项都能均匀排布。每个带有子菜单的li必须设置position:relative，因为它的子ul要基于这个li进行绝对定位。如果不设相对定位，子菜单会找到更外层的定位元素，甚至直接相对视口，造成错位。
二级菜单定位在一级li的正下方，三级菜单则定位在二级li的右侧。通过left与top精确控制。下方代码展示了定位上下文的建立方式，以及如何使用visibility隐藏但保留可过渡性。
.multi-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.multi-nav .nav-level-1 {
display: flex;
background: #2c3e50;
}
.multi-nav .nav-level-1 > li {
position: relative;
}
.multi-nav .nav-level-1 > li > a {
display: block;
padding: 12px 20px;
color: #fff;
text-decoration: none;
}
/* 子菜单默认隐藏 */
.multi-nav .nav-level-2,
.multi-nav .nav-level-3 {
position: absolute;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease;
background: #34495e;
min-width: 140px;
}
.multi-nav .nav-level-2 {
top: 100%;
left: 0;
}
.multi-nav .nav-level-3 {
top: 0;
left: 100%;
}
三、hover触发显示逻辑
纯CSS实现交互只能依赖:hover。当鼠标移到含子菜单的li上时，让其内部的子ul变为可见。由于我们使用visibility与opacity，过渡会平滑生效，不会出现生硬闪现。
这里有个细节：如果鼠标从父项移到子菜单过程中经过空隙，子菜单容易消失。把子菜单top设为父项高度（top:100%）并且不要留margin间隙，可以保证连续性。同时给子菜单加z-index，避免被后续兄弟元素遮挡。
.multi-nav .has-child:hover > .nav-level-2,
.multi-nav .has-child:hover > .nav-level-3 {
visibility: visible;
opacity: 1;
z-index: 10;
}
.multi-nav .nav-level-2 li,
.multi-nav .nav-level-3 li {
position: relative;
}
.multi-nav .nav-level-2 a,
.multi-nav .nav-level-3 a {
display: block;
padding: 10px 16px;
color: #ecf0f1;
white-space: nowrap;
}
.multi-nav .nav-level-2 a:hover,
.multi-nav .nav-level-3 a:hover {
background: #3d566e;
}
四、常见误区与兼容处理
不少开发者给所有层级都写display:block然后靠margin隐藏，结果下拉时把父容器撑高。绝对定位的子菜单已经脱离文档流，不会影响外部高度，前提是父li不能设overflow:hidden，否则子菜单会被裁切。
另一个问题是移动端没有hover。纯CSS方案在触屏上需要配合:focus-within或者checkbox hack。如果项目要求响应式，可以用媒体查询把嵌套导航转为纵向手风琴，通过:target或input状态控制展开，这里不展开讲，但记住绝对定位在窄屏要改为静态流。
/* 防止父级裁剪 */
.multi-nav .has-child {
overflow: visible;
}
/* 窄屏示例：转为纵向 */
@media (max-width: 600px) {
.multi-nav .nav-level-1 {
flex-direction: column;
}
.multi-nav .nav-level-2,
.multi-nav .nav-level-3 {
position: static;
visibility: visible;
opacity: 1;
}
}
五、小结
多层嵌套导航栏的CSS实现并不复杂，把握住三条：用相对定位建立上下文、用绝对定位放置子菜单、用visibility配合opacity做可过渡隐藏。结构上层层嵌套ul，样式上分级写后代选择器，就能维护出清晰易改的导航组件。
实际项目中建议把层级样式抽象成mixIn或公用类，避免重复书写定位代码。当导航超过三级，要考虑是否信息架构过重，而不是盲目堆砌CSS层级。