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

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
Подменю5

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

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

Заранее спасибо!

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.

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