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><a href="link1.html" target="_self">Main Menu 1</a>
<ul>
<li><a href="sub1.html" target="_self">Sub Menu 1</a></li>
<li><a href="sub2.html" target="_self">Sub Menu 2</a></li>
<li><a href="sub3.html" target="_self">Sub Menu 3</a></li>
<li><a href="sub4.html" target="_self">Sub Menu 4</a></li>
<li><a href="sub5.html" target="_self">Sub Menu 5</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 6</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 7</a></li>
</ul>
</li>
<li><a href="link2.html" target="_self">Main Menu 2</a></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!!