I'm working 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%;
}