Question

绿色的ul没有扩展到浮动两个蓝色的li。绿色的绝对是让我对高度没有覆盖其嵌套元素的悲伤。我怎样才能超越这个绿色背景，以覆盖其孩子？我想保持这个直接的CSS，但如果jquery将做我感兴趣的技巧。 http://jsfiddle.net/B34AU/

ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul {
    background: red;
}
li {
    display: inline-block;
    position: relative;
    width: 100px;
    background: yellow;
    margin: 10px;
}
li  ul {
    display: none;
    position: absolute;
    background: green;
    overflow: visible;
    white-space: nowrap;

}
li:hover > ul {
    display: block;
}
li > ul > li {
    background: blue;
    width: 200px;
    display: inline-block;
}

li > ul > li > ul {
    background: #cc0000;
    display:block;
}

li > ul > li > ul > li {
    background: #cc0000;
    display:block;
    width: 200px;
    margin: 0;
    padding: 0;
}

   <ul>
    <li>
        1
        <ul>
            <li><a href="">1.1</a>
            <ul>
            <li><a href="">1.1.1</a></li>
            <li><a href="">1.1.2</a></li>
            <li><a href="">1.1.3</a></li>
            </ul>
            </li>
            <li><a href="">1.2</a></li>
            <li><a href="">1.3</a></li>
        </ul>
    </li>
    <li>
        2
        <ul>
            <li>2.1</li>

        </ul>
    </li>
    <li>
        3
        <ul>
            <li>3.1</li>
            <li>3.2</li>
        </ul>
    </li>
</ul>

Answer 1

如果您想独立于子女数量展开<ul>，可以使用

li > ul {
    white-space: nowrap;
}
li > ul > li {
    display: inline-block;
}

Demo

Answer 2

Demo

您需要设置width：

width: 440px;

只需使用以下公式

numChilds * (marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRigth + marginRigth)
= 2 * (10+0+0+200+0+0+10)
= 2 * 220
= 440

Answer 3

我已经更改了这些CSS行，并且正常工作正常。

<强> Working Demo

更改了这些CSS

li > ul > li {
    background: blue;
    width: 200px;
    display: inline-block;
    vertical-align: top; /*Added this line*/
}

li > ul > li > ul {
    background: #cc0000;
    display:block;
    position: static;/*Added this line*/
}

parent ul没有扩展到内容

3 个答案: