Question

Newbie Question: 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


Thanks in advance!

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top