当一个li元素的高度增加时，使其他li元素自动换行。

Question

我正在制作一个下拉菜单，遇到的问题是，我有三个级别的

，在第二个级别中，如果
• 的高度增加了，因为它容纳了另一个
  ，那么所有其他第二级别的
  • 都不会围绕它包裹。
    
    您可以在此Fiddle中查看情况
    
    当您将鼠标悬停在“Technology”上时，您将能够看到“Web Design”
  • 的大小更大，因为它容纳了另一个
    ，因此“Typography”和“Front end”下移了。 有没有办法让它们绕着它包裹？
    
    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>
    

    编辑：附上几张截图

    这张图片显示了当前问题，注意排版和前端的位置。

    

    下面的图片显示了我想要实现的效果，请看排版和前端的位置。

    

- Abhinav

Answer 1

这是您需要的内容: JSFiddle

更新: 根据截图的JSFiddle (需要更新CSS规则)

更新: 基于类的JSFiddle示例

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

在Safari 6.1（Mac OS X 10.9）上测试 | 更新: 在Mac OS X 10.9下还额外测试了Chrome（30）和FF（23.0.1）

- dr.dimitru

---

@Abhi 我还在 Mac OS X 10.9 下测试了 Chrome (30) 和 FF (23.0.1) | 你能否提供你问题的截图？我觉得我没有理解你的问题。 - dr.dimitru

现在我明白了...抓住你了。在这里：http://jsfiddle.net/3qdPg/5/。但是您需要更新CSS样式。 - dr.dimitru

哎呀..你改变了HTML结构。HTML结构必须保持不变，否则导航的目的将无法实现。热点新闻、普通新闻、排版、前端、悲伤的消息和网页设计都是父类别，可能有子类别，也可能没有。例如网页设计有子类别，但其他类别没有。因此，这些子类别在ul下不能被逻辑地分组。 - Abhinav

@Abhi，在不使用特定类或ID将li元素放入不同列的情况下，这是唯一的方法。在你尝试实现的方法中，所有元素都将按照它们的宽度和浏览器的CSS布局引擎的要求进行排列。 - dr.dimitru

创建单独的列的主要问题在于内容的动态性，我无法控制将要出现的内容，因此基本上任何 li 的高度都可能不同，因此我无法判断一个列下可以有多少个 li。这就是为什么我正在寻找这种解决方案，使 li 可以自动排列的原因。 通过 li 上的 ID 还有其他方法吗？ - Abhinav