如何实现桌面端可横竖切换的纯HTML/CSS响应式菜单

直接基于你已有的水平菜单改造，下面是完整的HTML+CSS实现，满足所有需求：

核心思路 #

• 用CSS类切换实现桌面端水平/垂直布局的切换
• 用媒体查询处理移动端汉堡菜单逻辑
• 子菜单通过CSS伪类:hover（桌面）和:checked（移动端）控制显示

完整代码实现 #

HTML 结构 #

<!-- 布局切换按钮（仅桌面显示） -->
<label class="layout-toggle">
  <input type="checkbox" id="toggle-layout">
  切换垂直/水平布局
</label>

<!-- 汉堡菜单按钮（仅移动端显示） -->
<label class="hamburger">
  <input type="checkbox" id="toggle-menu">
  <span></span>
  <span></span>
  <span></span>
</label>

<!-- 主菜单容器 -->
<nav class="main-menu">
  <ul class="menu-list">
    <li class="menu-item">
      <a href="#">首页</a>
    </li>
    <li class="menu-item has-submenu">
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
        <li><a href="#">产品C</a></li>
      </ul>
    </li>
    <li class="menu-item has-submenu">
      <a href="#">服务</a>
      <ul class="submenu">
        <li><a href="#">咨询服务</a></li>
        <li><a href="#">技术支持</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">关于我们</a>
    </li>
  </ul>
</nav>

CSS 样式 #

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  padding: 20px;
}

/* 布局切换按钮（桌面端显示） */
.layout-toggle {
  display: none;
  margin-bottom: 15px;
  cursor: pointer;
}

/* 汉堡菜单（移动端显示） */
.hamburger {
  display: block;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  width: 100%;
  height: 4px;
  background: #333;
  left: 0;
  transition: .3s;
}
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
#toggle-menu:checked ~ .hamburger span:nth-child(1) { transform: rotate(45deg); top: 10px; }
#toggle-menu:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
#toggle-menu:checked ~ .hamburger span:nth-child(3) { transform: rotate(-45deg); top: 10px; }

/* 主菜单基础样式 */
.main-menu {
  margin-top: 10px;
}
.menu-list {
  background: #f5f5f5;
  border: 1px solid #ddd;
}
.menu-item a {
  display: block;
  padding: 12px 15px;
  color: #333;
  transition: background .3s;
}
.menu-item a:hover {
  background: #e0e0e0;
}

/* 子菜单基础样式 */
.submenu {
  display: none;
  background: #fff;
  border-left: 3px solid #2196F3;
}
.has-submenu:hover .submenu {
  display: block;
}

/* -------------------------- */
/* 移动端布局（默认） */
/* -------------------------- */
@media (max-width: 767px) {
  #toggle-menu:not(:checked) ~ .main-menu .menu-list {
    display: none;
  }
  .submenu {
    margin-left: 20px;
  }
}

/* -------------------------- */
/* 桌面端布局 */
/* -------------------------- */
@media (min-width: 768px) {
  .layout-toggle {
    display: block;
  }
  .hamburger {
    display: none;
  }

  /* 默认水平布局 */
  .menu-list {
    display: flex;
  }
  .has-submenu {
    position: relative;
  }
  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    border: 1px solid #ddd;
    border-top: none;
  }

  /* 垂直布局（通过复选框切换类） */
  #toggle-layout:checked ~ .main-menu .menu-list {
    flex-direction: column;
  }
  #toggle-layout:checked ~ .main-menu .submenu {
    position: static;
    border-left: 3px solid #2196F3;
    border-top: 1px solid #ddd;
    min-width: auto;
  }
}

关键说明 #

1. 布局切换：桌面端通过顶部的「切换垂直/水平布局」复选框，给菜单容器触发不同的Flex布局方向，水平用flex-direction: row（默认），垂直用flex-direction: column
2. 子菜单适配：水平布局时子菜单是悬浮下拉，垂直布局时子菜单是内嵌展开，通过position属性切换
3. 移动端响应：屏幕宽度小于768px时自动显示汉堡菜单，点击展开/收起整个菜单，子菜单默认内嵌展开
4. 无JS依赖：所有交互都用CSS伪类实现，完全符合你仅用HTML+CSS的要求

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