如何让下拉子菜单与父菜单项对齐？附代码求错误排查

嘿，我瞅了你的代码，问题根源很明确——定位上下文缺失！

当你给子菜单（ul）设置position: absolute时，它会自动寻找最近的、带有position: relative/absolute/fixed属性的父元素作为定位基准。但你现在的.navigation li没有设置任何定位属性，导致子菜单只能以页面的根元素（或更高层级的定位容器）为基准，自然就跑到主菜单顶部附近，没法和父菜单项对齐了。

修复方案 #

给.navigation li添加position: relative属性，让子菜单以当前父菜单项为定位基准：

.navigation li { 
  float: left; 
  position: relative; /* 新增这一行，关键修复 */
}

完整修改后的CSS代码 #

.menu { 
  width: 100%; 
  height: 40px; 
  margin: 0; 
  padding: 0; 
  background: #0c323f; 
  position: static; 
} 
.navigation { 
  list-style: none; 
  padding: 0; 
  margin: 0 0 0 16px; 
  background: rgb(58, 58, 58); 
  font-size: 16px; 
} 
.navigation li { 
  float: left; 
  position: relative; /* 关键修复 */
} 
.navigation li:hover { 
  background: #1a4655; 
} 
.navigation li:first-child { 
  -webkit-border-radius: 5px 5px 0 0; 
  border-radius: 5px 0 0 5px; 
} 
.navigation li a { 
  display: block; 
  padding: 0 20px; 
  text-decoration: none; 
  line-height: 40px; 
  color: #fff; 
} 
.navigation ul { 
  display: none; 
  position: absolute; 
  list-style: none; 
  margin-left: -3px; 
  padding: 0; 
} 
.navigation ul ul { 
  left: 100%; 
  top: 0; 
  width: 250px; 
  border-bottom-left-radius: 0 !important; 
} 
.navigation ul li { 
  float: none; 
} 
.navigation li:hover > ul { 
  display: block; 
  background: #1a4655; 
  /* border: solid 3px #fff;*/ 
  border-top: 0; 
  -webkit-border-radius: 0 0 8px 8px; 
  border-radius: 0 0 8px 8px; 
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); 
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); 
  position: absolute; 
  width: 250px; 
} 
.navigation li:hover > ul li:hover { 
  -webkit-border-radius: 0 0 5px 5px; 
  border-radius: 0 0 5px 5px; 
} 
.navigation li li a:hover { 
  background: #0c323f; 
  color: white; 
} 
.navigation ul li:last-child a, .navigation ul li:last-child a:hover { 
  -webkit-border-radius: 0 0 5px 5px; 
  border-radius: 0 0 5px 5px; 
}

额外小提示 #

如果子菜单的水平位置还有点偏移，可以调整.navigation ul的margin-left值，比如改成margin-left: 0，让它完全贴合父菜单项的左侧。

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