基于现有HTML下拉菜单代码实现嵌套子菜单的技术咨询

嘿，我明白你现在的困扰——想在现有下拉菜单基础上实现嵌套子菜单，但试了几次没成功对吧？别担心，我们可以基于你现有的代码做一些小改动就能实现你想要的层级菜单效果。

下面是修改后的完整代码，我会在后面解释关键的改动点：

修改后的HTML代码 #

<div class="dropdown" id="myDropdown">
  <button class="dropbtn">
    <i style='font-size:24px' class='fa'></i> level_0 <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">level_1</a>
    <!-- 新增的嵌套子菜单 -->
    <div class="dropdown sub-dropdown">
      <button class="sub-dropbtn">level_1 <i class="fa fa-caret-right"></i></button>
      <div class="dropdown-content sub-dropdown-content">
        <a href="#">level_2</a>
        <a href="#">level_2</a>
        <a href="#">level_2</a>
      </div>
    </div>
    <a href="#">level_1</a>
  </div>
</div>

修改后的CSS代码 #

#myDropdown {
  display:inline-block;
  vertical-align:-3.3px;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: #0F4391;
  padding: 8.5px 15px;
  background-color: inherit;
  font-family: inherit;
  cursor: pointer; /* 添加上手型光标，提升交互体验 */
}

/* 新增子菜单按钮样式 */
.sub-dropdown .sub-dropbtn {
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  color: #0F4391;
  padding: 12px 16px;
  background-color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 新增子菜单容器样式 */
.sub-dropdown {
  position: relative; /* 让子菜单相对于它定位 */
}

.sub-dropdown-content {
  left: 100%; /* 子菜单从父菜单右侧弹出 */
  top: 0; /* 和父菜单顶部对齐 */
}

.dropdown-content a {
  float: none;
  color: #0F4391;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* 新增子菜单按钮hover效果 */
.sub-dropdown:hover .sub-dropbtn {
  background-color: lightgray;
  color: black;
}

.w3.my-nav a:hover, .dropdown:hover .dropbtn {
  background-color: lightgray;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* 新增子菜单hover显示规则 */
.sub-dropdown:hover .sub-dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .w3.my-nav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }

  .w3.my-nav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .w3.my-nav.responsive {position: relative;}

  .w3.my-nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .w3.my-nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .w3.my-nav.responsive .dropdown,
  .w3.my-nav.responsive .sub-dropdown {float: none;}

  .w3.my-nav.responsive .dropdown-content,
  .w3.my-nav.responsive .sub-dropdown-content {position: relative;}

  .w3.my-nav.responsive .dropdown .dropbtn,
  .w3.my-nav.responsive .sub-dropdown .sub-dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

关键改动说明 #

• HTML结构调整：在一级下拉菜单中，将需要包含子菜单的项替换为一个新的.dropdown容器（添加.sub-dropdown类区分），里面包含子菜单按钮和子菜单内容，形成嵌套结构。
• CSS定位调整：给.sub-dropdown设置position: relative，确保子菜单的绝对定位是相对于它的；同时给.sub-dropdown-content设置left: 100%和top: 0，让子菜单从父菜单的右侧弹出并对齐顶部。
• 交互样式补充：添加子菜单按钮的hover效果，以及hover时显示子菜单的规则，保持和原菜单一致的交互体验。
• 响应式适配：在移动端媒体查询中，补充对.sub-dropdown和.sub-dropdown-content的样式处理，确保在小屏幕上也能正常展示。

这样修改后，你就能得到想要的嵌套子菜单效果啦！

备注：内容来源于stack exchange，提问作者max_c