Crear columnas automáticamente con una sola lista simple

Estoy tratando de escribir código flexible donde tengo un simple

    que automáticamente crea otra columna para cada 5to elemento. Encontré un tutorial que logra esto pero coloca los artículos en un orden horizontal mientras que requiero un orden vertical. He visto algunos otros tutoriales que generan un orden vertical, pero también agrega class="first" y class="second" a cada li que no es lo que quiero. Estoy buscando hacerlo con mi código HTML existente.

    Lo que quiero:

     -01 -06 -11 -02 -07 -12 -03 -08 -13 -04 -09 -14 -05 -10 -15 

    Lo que tengo:

     -01 -02 -03 -04 -05 -06 -07 -08 -09 -10 -11 -12 -13 -14 -15 

    CSS:

     ul { width:760px; margin-bottom:20px; overflow:hidden; } li { float:left; display:inline; } .double li { width:50.0%; } /* 2 col */ .triple li { width:33.3%; } /* 3 col */ .quad li { width:25.0%; } /* 4 col */ .six li { width:16.6%; } /* 6 col */ 

    HTML:

     
    • 01
    • 02
    • 03
    • 04
    • 05
    • 06
    • 07
    • 08
    • 09
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    Puedes usar este código :

     ul { -webkit-column-count: 4; -webkit-column-gap:20px; -moz-column-count:4; -moz-column-gap:20px; -o-column-count:4; -o-column-gap:20px; column-count:4; column-gap:20px; } 

    pero no estoy seguro si funciona en todos los navegadores desafortunadamente. Deberías experimentar eso.

    Aquí está el jsFiddle para jugar con él: http://jsfiddle.net/leniel/nRL4R/

    http://codepen.io/anon/pen/iDzmq

    Esta es la única forma que conozco de hacer esto. solo en el código que está usando para representar las listas, configúrelo para agregar un ul.sub cada 5 li

    ¿Alguna pregunta?