当一个li元素的高度增加时，使其他li元素环绕起来。

Question

我正在做一个下拉菜单。我面临的问题是，我有一个3级的<ul>，在第二级，当一个<li>的高度增加时，因为它容纳了另一个<ul>，那么第二级的所有其他<li>都不会环绕它。

您可以在这个小提琴中可视化这种情况。

当您将鼠标悬停在Technology上时，您将能够看到Web设计 <li>的大小更大，因为它可以容纳另一个<ul>，因为字体和前端已经下降到了下面。有什么办法能让它们绕来绕去吗？

Html结构如下所示：

<nav id="nav" role="navigation">
<ul class="clearfix">
    <li> <a href="?work"><span>Technology</span></a>
        <ul>
            <li><a href="#">Hot news</a></li>
            <li><a href="#">Sad news</a></li>
            <li><a href="#">Normal news</a></li>
            <li><a href="?webdesign">Web Design</a>
                <ul>
                    <li><a href="#">Super power</a>
                    </li>
                    <li><a href="#">Aim Gain</a>
                    </li>
                    <li><a href="#">Acheivers</a>
                    </li>
                    <li><a href="#">Lackers</a></li>
                </ul>
            </li>
            <li><a href="?typography">Typography</a>
            </li>
            <li><a href="?frontend">Front-End</a>
            </li>
        </ul>
    </li>
    <li><a href="?about">Personal Stuff</a>
    </li>
</ul>

​

编辑：附加了几张屏幕截图这张图片显示了目前的问题，参见排版和前端的位置。

​

​

以下图片显示了我正在努力实现的目标，请参阅排版和前端的位置。

​

​

Answer 1

给你：JSFiddle

UPD：从acc到屏幕截图中的JSFiddle (需要更新CSS规则)

UPD：基于类的JSFiddle示例

我刚删除了margin-left:20px; on #nav li ul li > ul

在Safari6.1(MacOSX10.9)xUPD上进行测试:在MacOSX10.9下在Chrome (30)和FF (23.0.1)上进行额外测试