Html 导航中与主菜单重叠的子菜单项

我是css新手。我正在尝试创建一个包含子项的导航菜单，但我想我遗漏了一些东西。子项与主项重叠

因此，在我看来，顶级列表项是浮动的，因此从正常的内容流中删除。这意味着我需要在之后清除浮动，以便子项显示在主项下

但这对我不起作用……有什么想法吗

添加一些CSS

#container nav ul li {
  float: left;
  width: 100px;
  height: 40px;
  color: white;
  background-color: black;
  text-align: center;
  border-right: solid #fff 1px;
  border-bottom: solid #fff 1px;
  padding-top: 7px;
  opacity: 0.8;
  position: relative;/*Add This Property*/
}

#container nav ul li ul {
    position: absolute;
    top: 100%;
    display: none;
}
#container nav ul li:hover ul{
  display:block;
}

您可以使用“位置”来设置它，请检查下面更新的代码段

* { 填充：0px； 边际：0px； } 身体{ 背景图像：url../images/background.jpeg； } 容器{ 宽度：100%； } 导航{} 集装箱导航{ 列表样式：无； } 集装箱导航{ 浮动：左； 宽度：100px； 颜色：白色； 背景色：黑色； 文本对齐：居中； 右边框：实心fff 1px； 边框底部：实心fff 1px； 填充：7px 5px； 不透明度：0.8； 位置：相对位置； } 集装箱导航{ 颜色：白色； 文字装饰：无； 显示：块； } 集装箱导航{ 明确：两者皆有； } 集装箱导航{ 位置：绝对位置； 最高：100%； 显示：无； } 集装箱导航ul li：悬停ul{ 显示：块； }

---

您只能选择第一个带有直接子项选择器>，然后它就可以工作了

#container nav > ul li {
  float: left;
  width: 100px;
  height: 40px;
  color: white;
  background-color: black;
  text-align: center;
  border-right: solid #fff 1px;
  border-bottom: solid #fff 1px;
  line-height: 40px;
  opacity: 0.8;
}

---

请用旧代码替换此代码：

* { 填充：0px； 边际：0px； } 身体{ 背景图像：url../images/background.jpeg； } 容器{ 宽度：100%； } 导航{} 集装箱导航{ 列表样式：无； } 集装箱导航{ 浮动：左； 宽度：100px； 高度：40px； 颜色：白色； 背景色：黑色； 文本对齐：居中； 右边框：实心fff 1px； 边框底部：实心fff 1px； 填充顶部：7px； 不透明度：0.8； 位置：相对位置； } 集装箱导航{ 颜色：白色； 文字装饰：无； 显示：块； } 集装箱导航{ 明确：两者皆有； } 集装箱导航{ 位置：绝对位置； 最高：100%； 显示：无； } 集装箱导航ul li：悬停ul{ 显示：块； }

---

@OgbobeBuko欢迎先生…：@OgbobeBuko请查看此链接并接受我的回答。

#container nav > ul li {
  float: left;
  width: 100px;
  height: 40px;
  color: white;
  background-color: black;
  text-align: center;
  border-right: solid #fff 1px;
  border-bottom: solid #fff 1px;
  line-height: 40px;
  opacity: 0.8;
}