如何让网站滑出汉堡菜单的列表项垂直排列？

问题根源在于全局CSS样式的继承：

• 全局ul设置了display: flex，滑出菜单内的子ul默认继承该属性，导致列表项横向排布
• 全局li的display: flex和横向margin也会干扰子菜单的垂直布局

以下是具体修复方案：

1. 重置滑出菜单的列表布局 #

给.slide ul添加display: block（或用flex-direction: column实现垂直flex布局），取消横向排列：

.slide ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block; /* 取消继承的flex横向布局 */
  /* 若偏好flex垂直排列可替换为：
  display: flex;
  flex-direction: column;
  */
}

2. 覆盖全局列表项样式 #

全局li的display: flex和横向margin会破坏垂直排列，针对性覆盖：

.slide ul li {
  width: 100%;
  display: block; /* 覆盖全局的display: flex */
  margin: 10px 0; /* 保留垂直间距，移除横向margin */
}

3. 清理冗余HTML标签 #

移除菜单内的<br>标签，用CSS控制间距更规范，修改后的HTML片段：

<div class="slide">
    <h1>Menu</h1>
    <ul>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Cart</a></li>
        <li><a href="#">Wishlist</a></li>
    </ul>
</div>

优化后的完整相关CSS片段 #

.slide{
  top:-10px;
  height:100%;
  width:200px;
  position:absolute;
  background-color: #212121;
  filter: alpha(opacity=50);
  transition: 0.5s ease;
  transform: translateX(-180px);
  padding-top: 60px; /* 给标题和选项预留间距 */
}
.slide ul {
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
  width: 100%;
  display: block;
}

.slide ul li {
  width: 100%;
  display: block;
  margin: 8px 0;
}

.slide ul li a {
  display: block;
  padding: 12px 15px;
  color: #fff;
  text-align: left; 
  text-decoration: none;
  background-color: #212121;
  width: calc(100% - 30px); /* 配合padding避免内容溢出容器 */
}

.slide ul li a:hover {
  background-color: #353535; 
}

h1 {
  color: #389261;
  font-weight: 800;
  text-align: center;
  margin: 10px 0;
  position: relative;
  pointer-events: none;
}

修改完成后，滑出菜单的选项即可实现垂直排列，同时保证样式的一致性与可维护性。

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