为什么我的<ul>不会扩展来包装它包含的<li>元素？</li> </ul>

Question

我正在使用WordPress。我有一个用列表构建的菜单。

基本上，它的样本是这样的：

<ul>
    <li>FrontPage</li>
    <li>MenuItem</li>
    <li>ParentMenuItem
        <ul> <--- This wont adjust its height to fit its children
            <li>MenuItemChild</li>
            <li>MenuItemChild</li>
        </ul>
    </li>
    <li>MenuItem</li>
</ul>

现在，ParentMenuItem不会展开并覆盖其背景和边框的所有子项。我无法弄清楚为什么。只有我能够覆盖它的方法是给它一个固定的高度。

Answer 1

将height的{​​{1}}从ul更改为100%：

auto

height: auto; 高度太小的原因是因为您使用的是ul，这意味着它将占据其父级的高度。 不意味着占用可用的最大空间，也不意味着承担所有孩子的高度之和。由于父级有100%，因此您的height: 33px也具有该高度。

Answer 2

在此规则中

.menu-primary-container ul li ul {
    height: 100%;
    /* ... */
}

您必须删除height。

您必须重命名选择器

.menu-primary-container ul

到

.menu-primary-container > ul

仅影响第一个ul，而不是所有后代。

Answer 3

这是因为你的<li>向左浮动，这意味着它们不会向包含元素提供任何形式。

如果您将嵌套的<li>设置为float: none; clear: both;，则应该解决问题。