CSS：使下拉子菜单显示在父级<ul> <li>下方

Question

我正在尝试构建一个CSS下拉菜单。问题是ul li树中的所有子节点都出现在同一行，而不是在父节点下面。如何使子类别出现在父类别下面？

- DreamWave

Answer 1

在 li 上添加 display:block; float: left;position: relative;，以建立一个包含块，然后在子菜单 ul 上添加 position:absolute; top:100%; left:0; 以相对于其包含块定位。

- Alin Purcaru

---

我刚刚做了那个，你可以看到结果... 但仍然不是预期发生的事情。 - DreamWave

将 display:block; float: left; 添加到 li 中，它就可以工作了。 - Alin Purcaru

我应该把它添加到哪个<li>中？ - DreamWave

@DreamWave 对于您添加了 position: relative 的相同元素，即包含子菜单的元素。我使用 Firebug 完成了这个操作，并且它有效。 - Alin Purcaru

Answer 2

你的主菜单项需要有一个定位上下文，可能是相对定位。然后，对于子菜单，将定位设置为绝对位置，将左侧设置为0，将顶部设置为100%。应该就可以解决问题了。

- mingos

---

我刚刚做了那个，你可以看到结果... 但仍然不是预期发生的事情。 - DreamWave

Answer 3

你可以使用CSS来定位子菜单。

ul li {
    position: relative;
}

ul li ul.sub {
    position: absolute;
    left: 0;
    top: 100%;
}

- skajfes

---

我刚刚做了那个，你可以看到结果...但仍然不是预期发生的事情。 - DreamWave