display unknown number of elements

I need to show "x" number of cateogories in a menu (basically a hidden div that pop up when someone clicks on a nav menu called "Category"). No problem with the div, but I am struggling with arranging the categories in any form of order inside the div. I don't want it to be a single column list an stretch all the way down to the page, so I would like either a mu开发者_如何学Clti column list or something else. I hear multi column list have compatibility challenges and are difficult to deal with. What other options do I have?

Something similar to the category list at http://www.answerbag.com/

Thanks

I was writing up an answer, but this article does a better job:

http://www.alistapart.com/articles/multicolumnlists/

It covers a number of different options, including the floated method used at answerbag, and one or two that are semantically more sensible while still ordering by column instead of by row.

Not so much, no. Coding a multi column list is easy as long as you're careful about your widths and clearing floats:

HTML

<div id="list">
    <ul>
        <li>Cat 1</li>
        <li>Cat 2</li>
        <li>Cat 3</li>
    </ul>
    <ul>
        <li>Cat 4</li>
        <li>Cat 5</li>
        <li>Cat 6</li>
    </ul>
    <div class="clear"></div>
</div>

CSS

#list {
    width: 400px;
}

#list ul {
    float: left;
    width: 200px; /* This width should be #list width divided by number of columns */
    margin: 0;
    padding: 0;
    list-style: none;
}

#list li {
    margin: 0;
    padding: 5px 0;
}

.clear {
    clear: both;
}