如何为现有汉堡菜单添加多级嵌套下拉导航功能？

需求概述 #

现有全屏汉堡菜单，点击按钮展开链接列表，需添加二级、三级嵌套下拉功能，目标结构如下：

<ul>
<li>Link 1</li>
<li>Link 2
<ul>
<li>Link A</li>
<li>Link B
<ul>
<li>Link C</li>
</ul>
</li>
</ul>
</li>
<li>Link 3</li>
</ul>

修改后的完整代码 #

HTML结构

<section class="top-nav">
  <div></div>
  <input id="menu-toggle" type="checkbox" />
  <label class='menu-button-container' for="menu-toggle">
    <div class='menu-button'></div>
    <span style="position: absolute; margin-left: 5em; font-size: 1.5em;">MENU</span>
  </label>
  <a>Login</a>
  <ul class="menu">
    <li><a>Link 1</a></li>
    <li class="has-submenu">
      <a>Link 2</a>
      <ul class="submenu">
        <li><a>Link A</a></li>
        <li class="has-submenu">
          <a>Link B</a>
          <ul class="submenu submenu-level3">
            <li><a>Link C</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a>Link 3</a></li>
  </ul>
</section>

CSS样式

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFF;
  height: 5em;
  padding: 1em;
  position: relative; /* 确保子菜单定位正确 */
}

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start; /* 菜单从上往下排列 */
  align-items: stretch; /* 列表项宽度占满容器 */
  z-index: 99;
  margin-top: 5em;
}

.menu > li {
  display: flex;
  flex-direction: column; /* 子菜单垂直排列 */
  justify-content: center;
  margin: 0;
  padding: 0.5em 0;
  width: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease;
}

/* 子菜单基础样式 */
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  background-color: rgba(0, 0, 0, 0.6); /* 二级菜单背景加深 */
}

.submenu-level3 {
  background-color: rgba(0, 0, 0, 0.7); /* 三级菜单背景更深 */
}

.submenu > li {
  padding: 0.5em 1em 0.5em 2em; /* 缩进区分层级 */
}

/* 主菜单展开时，子菜单触发逻辑 */
#menu-toggle:checked ~ .menu .has-submenu:hover > .submenu,
#menu-toggle:checked ~ .menu .has-submenu:focus-within > .submenu {
  height: auto;
  max-height: 500px; /* 限制最大高度避免过渡异常 */
}

/* 三级菜单展开逻辑 */
#menu-toggle:checked ~ .menu .has-submenu .has-submenu:hover > .submenu,
#menu-toggle:checked ~ .menu .has-submenu .has-submenu:focus-within > .submenu {
  height: auto;
  max-height: 500px;
}

.menu-button-container {
  display: flex;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: -19em;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 0.2em;
  width: 2em;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2em;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

#menu-toggle ~ .menu li {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

#menu-toggle:checked ~ .menu li {
  height: auto; /* 适配子菜单高度 */
  padding: 0.5em;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* 移动端触摸优化 */
.has-submenu > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 1em;
}

.has-submenu > a::after {
  content: '>';
  margin-left: 0.5em;
  transition: transform 0.2s ease;
}

.has-submenu:hover > a::after,
.has-submenu:focus-within > a::after {
  transform: rotate(90deg);
}

关键修改说明 #

1. 结构调整：给含子菜单的列表项添加has-submenu类，嵌套对应层级的ul.submenu，明确层级关系。
2. 布局修正：移除主菜单列表项的overflow:hidden，避免子菜单被裁剪；调整主菜单的justify-content为flex-start，让菜单从上到下排列。
3. 子菜单控制：子菜单默认隐藏（height:0），主菜单展开后，通过hover或focus-within触发展开，配合过渡动画保证流畅性。
4. 视觉区分：不同层级子菜单使用深浅不同的背景色和缩进，提升用户识别度。
5. 移动端适配：给父菜单链接添加箭头标识，交互时箭头旋转，提示可展开子菜单。

内容的提问来源于stack exchange，提问作者Jerry H