what to do when menu list items get too long?

I am following the vertical dropdown list tutorial here: [url]http://www.devinrolsen.com/pure-css-vertical-menu/[/url]

…and while everything looks OK, I worry about what will happen if the list items become too long. What I want is for the extra items to just move on over to the next column. How do I do that?

For reference, here is my css code:

[CODE]<style type=”text/css”>
#navigation
{
width:150px;
font-size:12px;
}
#navigation ul
{
margin:0px;
padding:0px;
background-color:#666;
}
#navigation ul li
{
height:25px;
line-height:25px;
list-style:none;
padding-left:10px;
color:#FFF;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
cursor:pointer;
}
#navigation ul li:hover
{
background-color:#F90;
position:relative;
}
#navigation ul ul
{
display:none;
position:absolute;
left:75px;
top:5px;
border:#fff solid;
border-width:1px;
background-color:#999;
}
#navigation ul li:hover ul
{
display:block;
}
#navigation ul ul li
{
border:none;
width:150px;
float:left;
display:inline;
}
#navigation ul ul li:hover
{
text-decoration:underline;
border:none;
}
#navigation li:hover ul li ul
{
display:none;
}
#navigation ul ul li ul
{
left:110px;
background-color:#0099CC;
}
#navigation ul ul li:hover ul
{
display:block;
}
</style>
[/CODE]

…and here is my HTML

[CODE]
<div id=”navigation”>
<ul>
<li>Links
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>itema</li>
<li>itemb</li>
<li>itemc</li>
<li>itemd</li>
<li>iteme</li>
<li>itemf</li>
<li>itemg</li>
<li>itemh</li>
<li>itemi</li>
<li>itemj</li>
<li>itemk</li>
<li>iteml</li>
<li>itemm</li>
<li>itemn</li>
<li>itemo</li>
<li>itemp</li>
<li>itemq</li>
<li>itemr</li>
<li>items</li>
<li>itemt</li>
<li>itemu</li>
<li>itemv</li>
<li>itemw</li>
<li>itemx</li>
<li>itemy</li>
<li>itemz</li>

</ul>
</li>
</ul>
</div>
[/CODE]

Also in #CSS _↴