In a set sized ul and floating li's inside, how do I get them to format properly

I have a ul the size of 200 pixels, and each li inside is size 100 pixels. Each li has a float:left property, right now the list is listing out left right left开发者_如何学JAVA right, how can i just get each list item to display in order from the left column to the right column. Here is an example to better see what I am talking about

List now:
List Item 1         List Item 2
List Item 3         List Item 4
List Item 5         List Item 6
List Item 7

How I want the list:
List Item 1       List Item 6
List Item 2       List Item 7
List Item 3
List Item 4
List Item 5

Markup:

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
</ul>

You'd have to use the non-cross-browser CSS3 column-count if you want to do this in CSS.

Here's a little explanation of the property: http://www.quirksmode.org/css/multicolumn.html