如何将子li的外边距应用到父li以避免子菜单溢出下方元素

问题原因 #

你遇到的重叠问题核心有两个：

• 你给所有li设置了固定高度height:30px，包含子菜单的父级li高度被锁死，子菜单展开后会溢出父容器，父容器不会随子内容自动撑开，下方的Kontakt元素位置还是按父级原有的30px高度计算，就会和溢出的子菜单重叠
• 你给所有li都加了margin-top:50px，子菜单里的li也继承了这个上边距，不仅会放大子菜单高度，还会进一步加剧溢出重叠的问题

修复后的完整CSS代码 #

#hide {
  display: none;
  padding: 0;
}

#projekte:hover #hide {
  display: block;
}

li {
  width: 80px;
  min-height: 30px;
  line-height: 30px;
  border-bottom: 1px solid;
}

/* 仅一级菜单li添加上边距 */
body > ul > li {
  margin-top: 50px;
}

/* 子菜单li取消上边距 */
#hide li {
  margin-top: 0;
}

a {
  color: grey;
  text-decoration: none;
}

ul {
  list-style-type: none;
  padding: 0;
}

a:hover {
  color: blue;
}

修改说明 #

1. 把li的固定height替换为min-height，搭配line-height保证文字垂直居中，父级li可以随子菜单展开自动撑开高度，从根源避免子元素溢出
2. 拆分外边距的作用范围：仅给一级菜单的li添加50px上边距，子菜单的li取消上边距，既保留了一级菜单的间距要求，也避免子菜单内部出现多余的大间距
3. 给所有ul添加padding:0，去掉浏览器默认的列表左缩进，菜单对齐更规整

修改后父级li的高度会自动包含子菜单的总高度，下方的Kontakt元素会自动排布在展开的子菜单下方，不会再出现重叠问题。

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