如何仅用CSS将多按钮式li列表转为单一下拉菜单（适配小屏）

先帮你修正下原HTML的结构问题——<ul>的直接子元素只能是<li>，所以把原本的<span>GO TO</span>放到一个<li>里作为下拉触发器。接下来是纯CSS实现方案，完全不需要JS，靠:focus-within伪类控制菜单展开/收起，特别适配小屏幕场景：

重构后的HTML #

<div class="col-md-3">
  <div class="dropdown-wrapper">
    <ul class="pc-scroller dropdown-menu">
      <li class="dropdown-trigger">
        <span>GO TO</span>
        <!-- 可选：加个箭头提示下拉功能 -->
        <span class="dropdown-arrow">▼</span>
      </li>
      <li class="pc-welcome">Welcome</li>
      <li class="pc-bebidasbeverages-114">Beverages</li>
      <li class="pc-traditional-style-breakfast-114">Traditional Breakfast</li>
    </ul>
  </div>
</div>

核心CSS代码（小屏幕优先） #

/* 基础容器样式 */
.dropdown-wrapper {
  width: 100%; /* 小屏幕占满父容器宽度 */
  max-width: 280px; /* 限制最大宽度，避免太宽 */
  position: relative;
}

.pc-scroller.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

/* 下拉触发器样式 */
.dropdown-trigger {
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f8f8;
}

.dropdown-arrow {
  font-size: 12px;
  transition: transform 0.2s ease; /* 箭头翻转动画 */
}

/* 默认隐藏下拉选项 */
.dropdown-menu li:not(.dropdown-trigger) {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease; /* 平滑展开/收起动画 */
}

/* 当容器内元素获得焦点时，展开菜单 */
.dropdown-menu:focus-within li:not(.dropdown-trigger) {
  height: auto;
  padding: 10px 15px;
}

.dropdown-menu:focus-within .dropdown-arrow {
  transform: rotate(180deg); /* 箭头翻转提示展开状态 */
}

/* 选项hover效果 */
.dropdown-menu li:not(.dropdown-trigger):hover {
  background-color: #f0f0f0;
}

/* 大屏幕适配（可选，比如md以上尺寸保持菜单展开） */
@media (min-width: 768px) {
  .dropdown-arrow {
    display: none; /* 大屏幕隐藏箭头 */
  }
  
  .dropdown-menu li:not(.dropdown-trigger) {
    height: auto;
    padding: 10px 15px;
  }
  
  /* 可选：大屏幕下横向排列菜单 */
  /* .dropdown-menu {
    display: flex;
    flex-direction: row;
  } */
}

关键实现说明 #

• :focus-within伪类：当下拉菜单容器内的任何元素（触发器或选项）获得焦点时，自动展开菜单；点击容器外会自动收起，完美适配小屏幕的触摸操作。
• 平滑过渡：通过height属性的过渡动画，让菜单展开/收起更自然，提升用户体验。
• 响应式兼容：媒体查询可以在大屏幕下切换菜单状态，兼顾PC端的使用习惯。
• 语义化保留：没有破坏原有的列表结构，保持了良好的可访问性和SEO友好性。

如果需要兼容不支持:focus-within的老浏览器，可以改用隐藏checkbox + 相邻兄弟选择器的方案，把触发器换成<label>绑定隐藏的<input type="checkbox">，核心逻辑用:checked控制菜单显示即可。

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