5

我正在处理一个下拉菜单。我面临的麻烦是，我有一个 3 级<ul>，并且在第二级，当 a 的高度<li>增加时，因为它正在容纳另一个<ul>，然后所有其他<li>第二级都不会环绕它。

您可以在此Fiddle中可视化情况

当您将鼠标悬停在技术上时，您将能够看到网页设计 <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**

4

1 回答 1

1

给你：JSFiddle

UPD : JSFiddle in acc to screenshot (需要更新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) 上额外测试

于 2013-10-24T14:59:53.530 回答