CSS：make下拉子菜单显示在父<ul> <li> </li> </ul>下面

Question

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

Answer 1

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

Answer 2

您可以使用css定位子菜单。

ul li {
    position: relative;
}

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

Answer 3

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