Existe un método muy sencillo para crear una lista que se muestre en varias columnas, con el inconveniente de que no siempre funciona bien en Internet Explorer, como en este caso, pero creo que la idea es interesante.

En los elementos de lista (LI) se insertará una clase (class="colx", donde x es el número de columna) que indica en que columna se sitúa, y en el primer elemento de la columna otra clase que indique el comienzo de la columna (en este caso son 17 elementos de lista en 3 columnas):

<ul>
 <li class="col1">Elemento de lista 12</li>
 <li class="col1">Elemento de lista 2</li>
 <li class="col1">Elemento de lista 3</li>
 <li class="col1">Elemento de lista 4</li>
 <li class="col1">Elemento de lista 5</li>
 <li class="col1">Elemento de lista 6</li>
 <li class="col2 sube">Elemento de lista 7</li>
 <li class="col2">Elemento de lista 8</li>
 <li class="col2">Elemento de lista 9</li>
 <li class="col2">Elemento de lista 10</li>
 <li class="col2">Elemento de lista 11</li>
 <li class="col2">Elemento de lista 12</li>
 <li class="col3 sube">Elemento de lista 13</li>
 <li class="col3">Elemento de lista 14</li>
 <li class="col3">Elemento de lista 15</li>
 <li class="col3">Elemento de lista 16</li>
 <li class="col3">Elemento de lista 17</li>
</ul>

Y ahora el CSS. Se le puede dar una anchura al elemento UL, en este caso 630px. Ahora ese ancho hay que repartirlo entre las columnas, a las que se le dará 200px, después de quitarles 5px en cada lado para separarlas unas de otras. Ahora hay que dar altura, 16px, con un line-height. A cada columna, definida por las clases de los elementos LI, se le define un margen izquierdo, estrechamente relacionado con las anchuras de los UL y LI. El primer LI de cada columna lleva una clase a la que se le dará un margin-topnegativo equivalente a la altura de cada columna, para que todas ellas queden a la misma altura: 96px (16px por los 6 elementos de lista LI en cada columna).

Código CSS

ul {width:630px;}
ul li {width:200px;margin:0 5px;line-height:16px;}
ul li.col1 {margin-left:0;}
ul li.col2 {margin-left:210px;}
ul li.col3 {margin-left:420px;}
ul li.sube {margin-top:-96px;}

Ver ejemplo

La limitación de este método es que se ha definido una altura de línea en los elementos de lista (LI), lo cual hace que la clase sube pierda su eefectividad en caso de que uno de dichos elementos de lista tenga más de una línea.

Referencia y enlaces relacionados

• CSS Swag: Multi-Column Lists, by Paul Novitski (A List Apart)
• Do You Want To Do That With CSS? – Multiple Column Lists (Community MX)