X-Cart forums - Alphabetical Dropdown Menu

This one is simple to explain, not sure if it's simple to fix.

CSS

Code:

#all_products {

    width:400px;

}

.category_link {

    position:relative;

    float:left;

    width:200px;

PHP

Code:

<a href="#" class="all_products" onmouseover="document.getElementById('all_products').style.display='block';" onmouseout="document.getElementById('all_products').style.display='none';"><span>All Products&nbsp;</span></a>

                    {foreach from=$topmenu_items key=toppos item=topcat}

                        {if $topcat.id ne 0}

                            <a id="topmenutab{$topcat.id}" href="home.php?cat={$topcat.id}" onmouseover="showTopMenu({$topcat.id})" onmouseout="hideTopMenu({$topcat.id})"><span>{$topcat.name}&nbsp;</span></a>

                        {/if}

                    {/foreach}

DER GIVENS
What we have here is a Navigation Menu, you mouse over it, it drops down a menu.

What happens is it loads each category as a Link Text. CSS says that each Link Text is 200px wide.

SO.

If the CSS says the entire block is 400px wide. Then it has two Link Texts and then moves to the next line.

It looks like there are two columns. No one can tell.

IE if the CSS says the entire block is 600px wide, then it has three Link Texts and then moves to the next line.

DER PROBLEM
My boss wants it to go alphabetical straight down for each column. :(

Unfortunately, if I remove the width, it just goes straight down. If I limit the height in CSS then it goes and stops at the height and doesn't create a new line.

He doesn't want to rearrange the categories so that they come out alphabetical.

Yeah I know the problem is pretty laughable.

What I need I guess is a way to "Continue" a Column after the first one.
Or
Is there a way to load a certain number in the array (foreach) to be 1 - 10 and then load them in separate columns. So if there were 24 link texts, I could load 1 - 10 in one and 11 - 20 in another and 21 - 24 in the last one.

I'm open to suggestion