html - 在嵌套列表中定位 html 元素

Question

考虑以下嵌套列表:

<div >
<ul class="main">
<li><a href="#">Fist item</a><ul class="ab"><li>a1</li><li>a2</li><li>a3</li><li>a4</li></ul>
</li>
<li><a href="#">Second item</a><ul class="ab"><li>b1</li><li>b2</li><li>b3</li><li>b4</li></ul></li>
<li><a href="#">Third item</a><ul class="ab"><li>c1</li><li>c2</li><li>c3</li><li>c4</li></ul>
</li>
</ul>
</div>

我希望外层水平显示，内层显示在外层正下方。为此，我在 css 样式中对外部和内部列表使用了相对和绝对位置:

#container {width:300px}
main {width:200px;position:relative;}
body > div > ul > li {display:block;float:left;padding:5px;}
body > div > ul > li > a:hover + .ab {display:block;}
.ab {display:none;clear:both;position:absolute;left:0px}

除非您将容器宽度调整为 200px(因为您可以在 JSfiddle 上尝试)，否则它工作正常(我必须实现一个使用不同宽度的解决方案)。在这种情况下，内层容器与外层容器重叠。我想知道是否可以通过css强制显示内部容器在外部容器之后显示，或者通过其他方式解决这个问题。

编辑:我需要让我的问题更清楚，因为到目前为止给出的答案显示了与我相同的建议 already制成。所以我在 css 样式中添加了一些内容，为内部容器声明了一个框(这里是更新 JSfiddle snippet )。关键问题是我的玩具示例模拟了更复杂网页中的左栏。我事先不知道这样一列的确切宽度(可能是 150 像素，可能是 200 像素或类似的东西)，我也不知道外部列表元素的标题长度。我需要一个适用于外部容器可能具有的任何宽度的解决方案。

这是我在默认情况下获得的屏幕截图:

这是我将外部容器缩小到 200px 得到的结果(在 JSfiddle 上自己试试):

而这正是我想要获得的:

我希望我的问题现在已经清楚了。

Answer 1

你需要让外层定位为相对的，内层定位为绝对的，像这样:

#container {width:300px}
.ab {
    display:none;
    clear:both;
    position:absolute;
    left:0px
}
body > div > ul > li {
    display:block;
    float:left;
    padding:5px;
    position:relative;
}
body > div > ul > li > a:hover + .ab {
    display:block;
    position:absolute; 
    left:0; /* So it aligns to the left edge of outer level */
    top:100%; /* So inner level isn't overlaping outer */
}
main {width:200px;position:relative;}

此处示例:https://jsfiddle.net/d9fsff69/2/