当一个li元素高度增加时,使其他li元素环绕

Question

我正在制作一个下拉菜单.我遇到的麻烦是,我有一个3级<ul>,而在第二级,当a的高度<li>增加,因为它正在容纳另一个,<ul>然后所有其他<li>的第二级别不包围它.

你可以想象这个小提琴中的情况

当你将鼠标悬停在技术上时,你就可以看到网页设计的 大小<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：JSFiddle 包含在屏幕截图中（需要更新 CSS 规则）

UPD：基于类的 JSFiddle 示例

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

在 Safari 6.1 (Mac OS X 10.9) 上测试 | UPD：在 Mac OS X 10.9 下的 Chrome (30) 和 FF (23.0.1) 上进行了额外测试