html - 动态生成的 super 菜单布局

Question

我正致力于构建一个动态生成的大型菜单。每个 super 菜单显示几个子菜单和链接。因为我不知道会有多少子菜单和链接，所以我在布局方面遇到了麻烦。我现在的想法是在生成菜单的时候使用这个结构:

  <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/