如何使用Bootstrap创建无边框嵌套Dropdown

嘿，作为HTML新手，实现嵌套下拉菜单确实容易卡壳，我给你写了一套完全符合你需求的代码——层级清晰（Indian Spices → Pepper → 两个子项）、无边框样式，还能通过点击触发展开/收起，一起来看：

完整代码实现 #

HTML结构（语义化层级） #

<div class="dropdown-container">
  <!-- 一级菜单：Indian Spices -->
  <div class="dropdown-item">
    <input type="checkbox" id="spices-toggle" class="dropdown-toggle">
    <label for="spices-toggle">Indian Spices</label>
    <!-- 二级菜单容器 -->
    <ul class="dropdown-menu">
      <!-- 二级选项：Pepper -->
      <li class="dropdown-subitem">
        <input type="checkbox" id="pepper-toggle" class="dropdown-toggle">
        <label for="pepper-toggle">Pepper</label>
        <!-- 三级子项 -->
        <ul class="dropdown-submenu">
          <li>Black Pepper</li>
          <li>White Pepper</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CSS样式（无边框+层级适配） #

/* 全局重置默认列表样式 */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 容器基础样式 */
.dropdown-container {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* 隐藏默认的checkbox（仅用作触发开关） */
.dropdown-toggle {
  display: none;
}

/* 菜单标签样式（点击交互区域） */
.dropdown-item label, .dropdown-subitem label {
  display: block;
  padding: 8px 12px;
  cursor: pointer;
  background-color: #f5f5f5; /* 可根据示例图调整背景色 */
}

/* 展开/收起箭头（增强交互提示） */
.dropdown-item label::after, .dropdown-subitem label::after {
  content: " ▶";
  float: right;
  font-size: 14px;
}
.dropdown-toggle:checked + label::after {
  content: " ▼";
}

/* 菜单默认隐藏 */
.dropdown-menu, .dropdown-submenu {
  display: none;
  margin-left: 20px; /* 层级缩进，直观体现父子关系 */
}

/* 选中时展开对应菜单 */
.dropdown-toggle:checked ~ .dropdown-menu,
.dropdown-toggle:checked ~ .dropdown-submenu {
  display: block;
}

/* 三级子项样式 */
.dropdown-submenu li {
  padding: 6px 12px;
  cursor: pointer;
}

/* 移除所有边框 */
.dropdown-container * {
  border: none;
  outline: none;
}

/* hover高亮效果（可根据示例图调整） */
.dropdown-item label:hover, .dropdown-subitem label:hover,
.dropdown-submenu li:hover {
  background-color: #e0e0e0;
}

关键细节说明 #

• 层级逻辑：用<ul>和<li>构建嵌套关系，完全匹配你要的父子层级结构，同时兼顾HTML语义化；
• 点击触发：借助隐藏的复选框和:checked伪类实现纯CSS点击展开，不需要写JavaScript，新手好上手；
• 无边框处理：通过border: none全局移除所有元素边框，同时重置了列表默认的内边距/外边距，避免多余样式干扰；
• 可定制性：你可以根据示例图调整背景色、字体大小、缩进距离等样式，完全适配你的视觉需求。

如果之前的实现问题是层级混乱或者样式冲突，试试这套代码，应该能解决你的问题～

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