CSS导航下拉菜单背景未铺满容器、按钮左侧有空白问题求助

你遇到的两个问题均由CSS语法错误和样式优先级冲突导致，具体修复点和完整代码如下：

核心问题原因 #

• 全局样式重置失效：CSS开头的通配符选择器漏写*，导致<ul>标签默认的左内边距没有被清除，出现子菜单左侧多余空白
• 子菜单列表项样式继承错误：你给所有#nav li统一设置了display: inline-block，子菜单的<li>也继承了该属性导致子项横向排列，背景无法纵向铺满
• 存在多处CSS语法错误：#main后漏写逗号、空选择器#content/#footer无声明、hover样式错误修改了a标签的display属性

修复后的完整CSS代码 #

/* 修复通配符选择器，全局重置边距 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-family: Arial, Helvetica, sans-serif;
}
/* 修复#main后的逗号语法错误 */
#main,
#header {
  background-color: #000;
  height: 46px;
}
#nav, .subnav {
  list-style-type: none;
  top:100%;
  left: 0;
}
#nav .subnav a {
  color: #000 ;
  padding: 0 16px;
}
#nav > li {
  display: inline-block;
}
#nav > li > a {
  color: #fff;
  text-transform: uppercase;
}
#nav li a {
  text-decoration: none;
  line-height: 46px;
  padding: 0 24px;
  display: block;
}
#nav  li {
  position:relative
}
#nav > li:hover > a {
  color: #000;
  background-color: #ccc;
}
/* 单独设置子菜单li为块级，纵向排列 */
#nav .subnav li {
  display: block;
}
#nav .subnav li:hover a
{
  color: #000;
  background-color: #ccc;
}
#nav .subnav {
  display: none;
  position: absolute;
  background-color: #fff;
  /* 清除子菜单ul默认内边距，解决左侧空白 */
  padding: 0;
  /* 可选：加阴影更贴近示例效果 */
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
#nav li:hover .subnav {
  display: block;
}
#slider {
  min-height: 600px;
  background-color: #333;
}

验证效果 #

修改后hover More按钮时，子菜单会纵向铺满背景，左侧无多余空白，完全符合示例的导航样式要求。

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