Мега Меню поможет?

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>

У меня много проблем с макетом. Я подгоняю контейнер шириной к окну и затем теку налево. Но я продолжаю получать меню, которые выглядят так:

Подменю1 Подменю2 Подменю3 Подменю4
Submenu5

Есть ли лучший способ создать макет, чтобы он был более симметричным? Я бы хотел, чтобы это выглядело примерно так:

Подменю1 Подменю2
Подменю3 Подменю4
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

Вложение div в тегах ul недопустимо в формате html!

вам лучше составить несколько списков в тегах div, чтобы вы могли

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

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

Теперь вы можете расположить свои списки с помощью CSS.

надеюсь это поможет