求助：移动端下拉菜单按钮居中且展开时推挤下方内容

核心思路 #

桌面端保留下拉菜单的悬浮效果（position: absolute），移动端将下拉菜单改为文档流内元素，通过max-height和overflow控制显示/隐藏，既实现关闭时不占空间，展开时又能推挤下方内容，同时保证按钮在所有视图下水平居中。

修改后的完整CSS代码 #

.main-article {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 2fr 1fr;
}

.button-link {
  background: none;
  border: none;
  text-decoration: none;
  color: var(--clr-neutral-400);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-align: center;
}

.dropdown.active>.menu-link,
.menu-link:hover {
  color: var(--clr-primary-400);
}

/* 基础样式：让按钮在桌面端水平居中 */
.dropdown {
  position: relative;
  display: flex;
  justify-content: center;
}

/* 桌面端下拉菜单样式（保留悬浮效果） */
.dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + .25rem);
  background-color: var(--clr-neutral-100);
  padding: .75rem;
  border-radius: .25rem;
  box-shadow: 0 2px 5px 0 rgb(0, 0, 0, .1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

.dropdown.active>.button-link+.dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 48rem) {
  .main-article {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
  }

  /* 移动端：改为垂直flex布局，按钮和菜单水平居中 */
  .dropdown {
    flex-direction: column;
    align-items: center;
  }

  /* 移动端下拉菜单：改为文档流元素，用max-height控制显示 */
  .dropdown-menu {
    position: static;
    left: auto;
    top: auto;
    opacity: 1;
    transform: none;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 .75rem; /* 初始上下padding为0，避免过渡跳动 */
    transition: max-height 150ms ease-in-out, padding 150ms ease-in-out;
    width: 100%;
    box-sizing: border-box;
  }

  .dropdown.active>.button-link+.dropdown-menu {
    max-height: 500px; /* 设为足够大的值，覆盖菜单最大高度 */
    pointer-events: auto;
    padding: .75rem; /* 展开时恢复上下padding */
  }
}

关键修改说明 #

1. 按钮居中：给.dropdown添加display: flex; justify-content: center;，确保桌面端按钮在grid中间列水平居中；移动端通过flex-direction: column; align-items: center;让按钮和下拉菜单都水平居中。
2. 移动端下拉菜单处理：
   • 去掉position: absolute，改为static，让菜单回到文档流，展开时自然推挤下方内容。
   • 用max-height: 0和overflow: hidden隐藏菜单，active状态下设置max-height: 500px（可根据实际菜单高度调整）实现平滑过渡，替代opacity和transform的悬浮过渡逻辑。
   • 调整padding的过渡，避免菜单展开/收起时出现布局跳动。
3. 桌面端保留原有交互：桌面端仍使用绝对定位的悬浮菜单，符合PC端用户习惯。

内容的提问来源于stack exchange，提问作者D.Samu