Dynamically generated Mega Menu layout

I'm worki开发者_JAVA百科ng on building a mega-menu that's generated dynamically. Each mega-menu displays several submenus and links. Since I don't know how many submenus and links there will be, I am having trouble with the layout. My idea now is to use this structure when the menu is generated:

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

I'm having a lot of trouble with layout though. I fit the container width into the window and then I flow left. But I keep getting menus that look like this:

Submenu1   Submenu2   Submenu3    Submenu4
Submenu5

Is there a better way to generate the layout so it could be more symmetrical? I'd like it to look something like this:

Submenu1   Submenu2   
Submenu3    Submenu4
Submenu5

Try this:

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

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

Demo: http://jsfiddle.net/AlienWebguy/8CThT/

nesting divs in ul tags isn't valid html!

you better make several lists in div tags so you can position them wel

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

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

now you can position your lists with css.

hope this helps