html - 当一个 li 元素高度增加时，让其他 li 元素环绕

Question

我正在制作下拉菜单。我面临的麻烦是，我有 3 级 <ul> , 在第二层，高度为 <li>增加是因为它容纳了另一个 <ul>然后所有其他 <li>第二层的不要环绕它。

你可以想象这个Fiddle中的情况

当您将鼠标悬停在Technology 上时，您将能够看到Web Design 的大小<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>

编辑附上几张截图 此图显示了当前的问题，请参阅 Typography 和 Front-end

的位置

下图显示了我正在努力实现的目标，请参见Typography 和Front-end

的位置

Answer 1

给你:JSFiddle

更新:JSFiddle in acc to screenshot (需要更新CSS规则)

更新:JSFiddle example based on classes

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

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