侧边栏转下拉菜单不居中、无法覆盖下方内容问题求解

下拉菜单问题修复方案 #

所有修改仅涉及CSS代码，无需调整JavaScript逻辑，适配你的技术使用需求。

问题1：展开的下拉列表推开下方元素、无法悬浮覆盖的修复 #

按以下规则调整CSS：

1. 给下拉容器添加相对定位作为定位参照物，同时删除容器的溢出裁剪属性，避免下拉菜单被截断
2. 给下拉菜单添加绝对定位，使其脱离正常文档流，不占用页面空间挤压下方内容

/* 新增规则 */
.dropdown {
  position: relative;
}

/* 修改原有.container规则，删除overflow:hidden */
.container {
  margin: 0;
  padding: 10px;
  position: relative;
  /* overflow: hidden; 注释/删除该行 */
}

/* 修改原有.dropdown .dropdown-menu规则，新增定位相关属性 */
.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  /* 原有border属性移到下方.show类中，避免收起时残留边框 */
  /* border: solid 2px black; */
  /* 新增以下属性 */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 999;
  box-sizing: border-box;
}

/* 修改原有.show类，补充边框属性 */
.dropdown .show {
  display: block;
  max-height: 600px;
  animation: showAnimation 0.5s ease-in-out;
  transition: 1s ease-in-out;
  border: solid 2px black;
}

问题2：下拉菜单展开后内容不居中的修复 #

给下拉菜单项的链接添加水平居中属性即可：

/* 修改原有.dropdown .dropdown-menu li a规则，新增text-align */
.dropdown .dropdown-menu li a {
  display: block;
  color: #000000;
  background: #ffffff;
  padding: 5px 0;
  text-align: center;
}

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