为什么我的<UL>不会扩展来包装它包含的<LI>元素？

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你的ul,从100%到auto:

height: auto;

您的ul身高太小的原因是因为您正在使用100%,这意味着它将占据其父亲的身高.它并不意味着占用的最大可用空间,也不意味着承担其所有儿童的身高的总和.由于父母有height: 33px,你ul也有这个高度.