能否仅用HTML和CSS实现如图所示的页面可复用多级溢出下拉选择器？

完全可以仅通过HTML和CSS实现这类多级溢出下拉选择器，且能在同一页面多次复用，核心靠CSS伪类和选择器控制菜单的显示/隐藏，不需要任何JavaScript。下面是具体实现方案：

核心实现思路 #

• 用独立容器类（比如.multi-select）包裹每个选择器实例，避免多实例样式冲突
• 默认状态下通过overflow: hidden隐藏溢出的选项/子菜单，利用:hover伪类触发显示
• 嵌套HTML结构对应多级菜单层级，用相邻兄弟选择器或子选择器控制样式

完整代码示例 #

HTML结构 #

<!-- 第一个选择器实例 -->
<div class="multi-select">
  <div class="select-trigger">选择分类</div>
  <div class="select-menu">
    <div class="menu-level">
      <div class="menu-item">电子产品</div>
      <div class="sub-menu">
        <div class="menu-level">
          <div class="menu-item">手机</div>
          <div class="sub-menu">
            <div class="menu-level">
              <div class="menu-item">苹果</div>
              <div class="menu-item">华为</div>
            </div>
          </div>
        </div>
        <div class="menu-level">
          <div class="menu-item">电脑</div>
        </div>
      </div>
    </div>
    <div class="menu-level">
      <div class="menu-item">服饰</div>
    </div>
  </div>
</div>

<!-- 第二个选择器实例 -->
<div class="multi-select">
  <div class="select-trigger">选择地区</div>
  <div class="select-menu">
    <div class="menu-level">
      <div class="menu-item">中国</div>
      <div class="sub-menu">
        <div class="menu-level">
          <div class="menu-item">北京</div>
          <div class="menu-item">上海</div>
        </div>
      </div>
    </div>
    <div class="menu-level">
      <div class="menu-item">美国</div>
    </div>
  </div>
</div>

CSS样式 #

/* 基础容器样式，确保多实例独立 */
.multi-select {
  position: relative;
  display: inline-block;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 150px;
}

/* 触发按钮样式 */
.select-trigger {
  padding: 8px 12px;
  cursor: pointer;
  background-color: #f8f8f8;
}

/* 菜单容器默认隐藏 */
.select-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}

/* 鼠标悬停触发菜单显示 */
.multi-select:hover .select-menu {
  max-height: 300px;
}

/* 菜单层级样式 */
.menu-level {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.menu-item {
  padding: 6px 12px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f0f0f0;
}

/* 子菜单默认隐藏 */
.sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  width: 150px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}

/* 父菜单项hover时显示子菜单 */
.menu-item:hover + .sub-menu,
.sub-menu:hover {
  max-height: 300px;
}

关键细节说明 #

• 每个.multi-select容器都是独立实例，页面中可以任意复制使用，样式不会互相干扰
• 通过max-height结合过渡动画实现菜单的平滑展开/收起，替代display: none实现更好的视觉效果
• 子菜单采用绝对定位，hover父菜单项或子菜单本身时保持显示，避免鼠标移动过程中菜单消失
• 可以根据需求调整宽度、颜色、动画时长等样式，适配不同设计风格

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