jquery - 父ul没有扩展到内容

绿色的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>

最佳答案

我已经更改了这些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*/
}

关于jquery - 父ul没有扩展到内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20985889/