Lista con elementos multilinea

[mblascog]

Buenas,
Estoy intentando crear una lista con 5 columnas. Resulta que el contenido de alguna de las opciones no cabe en una línea.
Al crearse la nueva línea, las siguientes columnas también saltan de posición y no sé como controlarlo.

En la siguiente imagen se ve:


La segunda fila de la columna Fiscal debería de aparecer en la segunda fila, pero de contabilidad, tal como se muestra aquí:


El código CSS es este:

Código CSS:

section article div#arees{
    width:100%;
    padding-left:2%;
    padding-right:2%;
}
section article div#arees ul#columnes{
    padding:0px;
    float:left;
    margin:0px;
    width:100%;
    list-style-type:square;
}
section article div#arees ul#columnes li{
    padding:0;
    display:inline-block;
    float:left;
    width:20%;
    font:bold .9em 'Helvetica';
    padding-top:1%;
}
section article div#arees ul#columnes li a
    {padding:0;
    display:inline;
    float:left;
    width:100%;
    font:bold .8em 'Helvetica';
    text-decoration:none;
    margin-right:1%;
}
section article div#arees ul#columnes li a:hover{
    text-decoration:underline;
}
 

Y el código HTML este:

Código HTML:

<ul id="columnes">
    <li>CONTABILIDAD</li>
    <li>FISCAL</li>
    <li>JURÍDICO</li>
    <li>LABORAL</li>
    <li>PERSONAL</li>
    <li><a href="#">-cm-Estudio, Organización</a></li>
    <li><a href="#">-fi-12</a></li>
    <li><a href="#">-ju-13</a></li>
    <li><a href="#">-la-14</a></li>
    <li><a href="#">-pe-15</a></li> 
    <li><a href="#">-cm-Contabilidad de Sociedades,</a></li>
    <li><a href="#">-fi-Información</a></li>
    <li><a href="#">-ju-23</a></li>
    <li><a href="#">-la-24</a></li>
    <li><a href="#">-pe-25</a></li>
</ul>
 

Muchas gracias