多列子导航列表浮动左高度调整？

Question

我正在创建一个由无序列表组成的子菜单，其li元素左侧浮动为两列。

http://jsfiddle.net/orvn/mrCxu/

当特定列表项的文本多于其他列表项时，它会包装并占用比预期更多的空间（我没关系）。

我似乎无法获得更长的列表项来填充其他两个列表项的空间，因此没有间隙（请参阅链接的jsfiddle）。

连连呢？ （我对菜单项目顺序并不十分特别）

HTML

<div id="wrapper">
    <ul>
        <li><a href="">List item one</a></li>
        <li><a href="">List item two</a></li>    
        <li><a href="">List item three is longer</a></li> 
        <li><a href="">List item four</a></li>
        <li><a href="">List item five</a></li>
        <li><a href="">List item six</a></li>
        <li><a href="">List item seven</a></li>
        <li><a href="">List item eight</a></li>
        <li><a href="">List item nine</a></li>
        <li><a href="">List item ten</a></li>
        <li><a href="">List item eleven</a></li>
    </ul>
</div>

CSS

#wrapper {width:140px; margin:10px 0 0 10px; padding:0} 
#wrapper ul {list-style-type: none; margin:0; padding:0}
#wrapper ul li {float:left;}
#wrapper ul li a {display:block; height:100%; width:64px; border:1px solid}