父母<ul>与孩子<ul>身高相同

Question

>我有一些嵌套的<ul> s，我希望它们的高度相同：最高的高度。我无法指定任何<ul>的高度，因为它取决于其中的<li>量。

我想我可以使用一些 js 轻松解决这个问题，但我很好奇是否可以使用 CSS 修复这个问题。

我创建了一个简单的小提琴来演示：http://jsfiddle.net/vnFLK/2/

<nav>
    <ul>
        <li>Li 1
            <ul>
                <li>Sub 1</li>
                <li>Sub 2</li>
            </ul>
        </li>
        <li>Li 2
            <ul class="green">
                <li>Sub 1</li>
                <li>Sub 2</li>
                <li>Sub 3</li>
            </ul>
        </li>
    </ul>
</nav>

带有绿色边框的<ul>应该确定根<ul>的高度，然后我希望同级<ul>获得相同的高度。绿色<ul>向右推 200% 只是为了更清晰。

这是导航的简化表示形式，其中<ul>是将拉到父菜单上的子菜单。因此，它们需要具有相同的高度，以防止显示父菜单。

/埃里克

Answer 1

绝对定位的元素不再是文档流的一部分 - 它们充当新的上下文。因此，父元素不知道子元素的大小，也无法调整自己的大小以匹配它。

没有CSS解决方案。你需要使用 JavaScript。