滑动菜单内添加Dropdown menu及自适应布局问题求助

核心实现思路 #

用垂直Flex布局搭建滑动菜单框架，让下拉菜单作为Text1的子元素默认隐藏，触发时展开，利用Flex的流布局特性让Text2、Text3自动下移适配。

完整代码实现 #

HTML结构

<!-- 滑动菜单容器 -->
<div class="slide-menu">
  <!-- Text1 下拉模块 -->
  <div class="dropdown-wrap">
    <button class="dropdown-btn">Text 1</button>
    <!-- 下拉菜单列表 -->
    <ul class="submenu">
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
      <li><a href="#">子菜单项3</a></li>
    </ul>
  </div>
  <!-- 其他菜单区域 -->
  <div class="menu-item">Text 2</div>
  <div class="menu-item">Text 3</div>
</div>

CSS样式

/* 滑动菜单基础样式 */
.slide-menu {
  width: 260px;
  background-color: #f8f9fa;
  padding: 12px;
  /* 垂直Flex布局，自动排列菜单元素 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 通用菜单元素样式 */
.menu-item, .dropdown-btn {
  width: 100%;
  padding: 10px 14px;
  background-color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

/* 下拉菜单默认隐藏 */
.submenu {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  /* 用max-height实现平滑展开/收起 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* 下拉菜单项样式 */
.submenu li {
  padding: 8px 14px;
}

.submenu li a {
  text-decoration: none;
  color: #333;
  display: block;
}

/* hover触发下拉展开 */
.dropdown-wrap:hover .submenu {
  /* 设置足够大的max-height容纳所有子项 */
  max-height: 200px;
}

可选：点击触发下拉（替代hover）

如果需要点击展开而非 hover，添加以下JS代码：

const dropdownBtn = document.querySelector('.dropdown-btn');
const submenu = document.querySelector('.submenu');

dropdownBtn.addEventListener('click', () => {
  submenu.classList.toggle('active');
});

同时在CSS中添加：

.submenu.active {
  max-height: 200px;
}

关键细节说明 #

1. 布局自适应：Flex垂直布局会自动识别子元素高度变化，当下拉菜单展开时，Text2、Text3会自动向下偏移，无需手动调整位置。
2. 平滑过渡：用max-height替代display: none实现展开/收起的动画效果，避免页面布局跳变。
3. 样式适配：可根据需求调整颜色、阴影、间距等参数，匹配设计效果。

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