动态生成的超级菜单布局

Question

我正在努力构建一个动态生成的大型菜单。每个超级菜单显示多个子菜单和链接。由于我不知道会有多少子菜单和链接，因此我在布局方面遇到了麻烦。我现在的想法是在生成菜单时使用这种结构：

  <div class="container">
    <ul class="submenus">
    <li><div class="block">
      <h4>Submenu1</h4>
      <a>link1</a>
      <a><link2</a>
    </div></li>
    <li><div class="block">
      <h4>SubMenu2</h4>
      <a>Link3</a>
    </div></li>
    </ul>
  </div>

不过我在布局方面遇到了很多麻烦。我将容器宽度放入窗口中，然后向左流动。但我不断收到如下所示的菜单：

Submenu1   Submenu2   Submenu3    Submenu4
Submenu5

是否有更好的方法来生成布局，使其更加对称？ 我希望它看起来像这样：

Submenu1   Submenu2   
Submenu3    Submenu4
Submenu5

Answer 1

试试这个：

.container, .submenus {
    width:100%;
    margin:0;
    padding:0;
}

.submenus li {
    display:block;
    float:left;
    width:50%;
}

演示：http://jsfiddle.net/AlienWebguy/8CThT/

Answer 2

在 ul 标签中嵌套 div 不是有效的 html！

你最好在 div 标签中创建几个列表，这样你就可以很好地定位它们，

<div id="firstlist">
<ul id="list1">
<li></li>...
</ul>
</div>

<div id="secondlist">
<ul id="list2">
<li></li>...
</ul>
</div>

现在你可以使用 css 来定位你的列表。

希望这有帮助