为何设置嵌套ul的宽度与背景颜色样式未生效？

问题原因 #

你给嵌套ul设置的width和background-color不生效，核心问题出在两点：

1. 子li绝对定位导致父ul高度塌陷：你给.mid > ul > li > ul li设置了position: absolute，该属性会让子li完全脱离文档流，父ul（嵌套的那个）失去正常流内容支撑，高度变为0，背景色自然无法显示，宽度设置也失去视觉效果。
2. 嵌套ul未清除默认内边距：HTML的ul标签默认带有padding-left，会干扰你设置的width实际展示效果。

修复方案 #

1. 调整下拉菜单定位逻辑 #

下拉菜单的定位应该给嵌套ul设置position: absolute，同时给它的父元素（.mid > ul > li）设置position: relative，让下拉框相对于父li定位，而非给子li设置绝对定位。

2. 清除嵌套ul默认内边距 #

给嵌套ul添加padding: 0，消除默认样式干扰。

3. 修正子li布局样式 #

移除子li的position: absolute，根据需求调整布局方向（比如垂直排列的话，给嵌套ul设置flex-direction: column）。

修复后的关键CSS代码 #

.mid > ul > li {
  list-style: none;
  padding: 0 20px 10px;
  position: relative; /* 添加相对定位，作为下拉框的定位参照 */
}

.mid > ul > li > ul {
  display: flex;
  flex-direction: column; /* 改为垂直排列，符合下拉菜单常规布局 */
  margin: 0;
  padding: 0; /* 清除默认内边距 */
  background-color: #75391e;
  width: 180px; /* 调整为合适宽度 */
  overflow: hidden;
  position: absolute; /* 下拉框绝对定位 */
  top: 100%; /* 定位在父li底部 */
  left: 0;
}

.mid > ul > li > ul li {
  background-color: #209ddb;
  list-style: none;
  padding: 8px 15px; /* 添加内边距，优化点击区域 */
}

.mid > ul > li > ul a {
  text-decoration: none;
  color: white; /* 设置文字颜色，保证深色背景下可见 */
}

额外优化（可选） #

如果需要默认隐藏下拉菜单，鼠标hover时显示，可添加：

.mid > ul > li > ul {
  display: none; /* 默认隐藏 */
}

.mid > ul > li:hover > ul {
  display: flex; /* hover时显示 */
}

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