Html 将子菜单悬停到左侧css

当我将鼠标悬停在li上时，试图在左侧有一个子菜单，但问题是它也会显示li下的空间。在这个演示中，当超级链接3悬停时，li下有一些空间

---

之所以在这里看到间隔符，是因为您使用“relative”（相对）定位“nav li>ul li:hover>ul”，这样它的父对象也会按其高度展开

我建议你使用“绝对”而不是“相对”

然后用“相对”来定位其父对象

---

对于效果，请尝试。

您之所以在此处看到间隔符，是因为您将导航li>ul li:hover>ul”设置为“relative”，这样它的父级也将按其高度展开

我建议你使用“绝对”而不是“相对”

然后用“相对”来定位其父对象

---

对于效果，请尝试。

正如edmond wang所说，对.has_孩子的孩子使用位置“绝对”而不是“相对”，否则元素仍将是流的一部分，并为其保留空间。给元素一个绝对位置将使其脱离流，从而消除额外的空间

.has_children {
   position: relative;
}

为了代码的可读性和可维护性，尝试使用类

.is_children {
  position: absolute;
  width: 100%;
  top: 2px;
  left: 100%;
  padding: 8px;
}

同时尝试将不同的类赋予主父级“ul”

---

看一看

正如edmond wang所说，对.has_儿童的孩子使用位置“绝对”而不是“相对”，否则元素仍将是流的一部分，并为其保留空间。给元素一个绝对位置将使其脱离流，从而消除额外的空间

.has_children {
   position: relative;
}

为了代码的可读性和可维护性，尝试使用类

.is_children {
  position: absolute;
  width: 100%;
  top: 2px;
  left: 100%;
  padding: 8px;
}

同时尝试将不同的类赋予主父级“ul”

---

请看一下

对不起，我不太明白。我没有看到li和子菜单之间有任何空格。我正在用chrome观看。我确实看到li和子菜单的宽度不同，这就是你的意思吗？对不起，我不太明白。我没有看到li和子菜单之间有任何空格。我正在用chrome观看。我确实看到li和子菜单的宽度不同，这就是你的意思吗？谢谢edmond的解释谢谢edmond的解释

.has_children {
   position: relative;
}

.is_children {
  position: absolute;
  width: 100%;
  top: 2px;
  left: 100%;
  padding: 8px;
}