two columns for dynamic drop down menu - html

Question

I want to make a two columns drop down menu like this.
Main Menu 1 | Main Menu 2 | Main Menu 3
Sub Menu 1 | Sub Menu 5
Sub Menu 2 | Sub Menu 6
Sub Menu 3 | Sub Menu 7
Sub Menu 4
Here is my code.
<style>
ul{
list-style:none;
}
li{
float:left;
}
li li {
width:50%;
}
</style>
<ul>
<li>Main Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li>Main Menu 2</li>
<li><a href="#" target="_self" >Main Menu 1</a></li>
</ul>
But if I use float left, it becomes this.
Main Menu 1 | Main Menu 2 | Main Menu 3
Sub Menu 1 | Sub Menu 2
Sub Menu 3 | Sub Menu 4
Sub Menu 5 | Sub Menu 6
Sub Menu 7
How can I make it by CSS or Query? Any ideas? Thanks!!

Answer 1

If you need to stick to just HTML, you can either reorder your list items to fall in alternating order:
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 5</li>
<li>Sub Menu 2</li>
<li>Sub Menu 6</li>
<li>Sub Menu 3</li>
<li>Sub Menu 7</li>
<li>Sub Menu 4</li>
</ul>
Which isn't great, but works.
Or, you can separate the list into two lists (also not the best solution).
<ul class="col1">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
</ul>
<ul class="col2">
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
If your content is generated elsewhere, or you're unable to adjust your lists for some reason, A List Apart has a good article on this: http://alistapart.com/article/multicolumnlists

Answer 2

The answer: google it. "CSS multi-level navigation" brought me 29 800 000 results.
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://alistapart.com/article/dropdowns
http://speckyboy.com/2013/01/30/more-responsive-navigation-solutions/
http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
http://woork.blogspot.be/2009/09/how-to-implement-perfect-multi-level.html
http://geek.ryanhellyer.net/products/suckerfish_css/
And tons of others.