为什么display: inline-block无法修复二级导航背景块显示不全问题

问题根因 #

• 浏览器默认给<ul>标签内置了左侧padding-left样式，导致.subnav容器内的子元素整体右移，左右出现留白
• 子导航内的<a>标签默认为行内元素，宽度仅包裹文字内容，添加背景只会覆盖文字区域，无法铺满整行
• 常见遗漏点：包含More的父级<li>未设置position: relative，会导致二级导航的绝对定位基准偏移

修复代码 #

你可以直接替换原有.subnav相关CSS，新增子元素样式即可：

/* 先给包含More的父级li添加相对定位，这步别漏 */
#nav > li {
  position: relative;
}

#nav .subnav {
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  top: 100%;
  left: 0;
  /* 新增：清除ul默认样式 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 新增：子项和链接样式 */
#nav .subnav li {
  width: 100%;
}
#nav .subnav li a {
  /* 把a标签改成块级元素，自动占满整行宽度 */
  display: block;
  width: 100%;
  /* 按需调整内边距，控制点击区域和文字位置 */
  padding: 8px 12px;
  /* 避免padding撑宽元素 */
  box-sizing: border-box;
  /* 你要的灰色 hover/active 背景直接加在这里即可 */
}

补充说明 #

你之前加的min-width: 160px是有效的，作用是限制二级导航的最小宽度，避免内容过窄导致折行，不需要删除。如果想要背景完全贴合容器边缘，不需要额外加其他样式，上述代码已经处理了默认边距的问题。

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