Menú ul en linea

[madman_18]

Hola a todos!

Veréis, querría hacer que el menú de la web aparezca en pequeños bloques de 3 en línea (situados uno al lado del otro), y me estoy encontrando con problemas...

Lo estoy haciendo para un móvil así que el ancho máximo lo tengo en 320px...mi menú está hecho de la siguiente forma:

Código HTML:

<div>
      <ul>
            <li>Sub hijo 1</li>
            <li>Sub hijo 2</li>
     </ul>
      <ul>
            <li>Sub hijo 2.1</li>
            <li>Sub hijo 3.1</li>
     </ul>
</div>
 

Cada ul sería la opción del menú.....y aquí pongo el css

Código CSS:

width:100px;height:auto;margin:0 !important;padding:0 !important;display:inline-block !important;
 

Me los muestra en línea, pero cuando llega a la 4ª opción del menú que debería dibujarlo en una segunda línea (ya que no hay espacio porque las 3 primeras opciones ocuparían ya los 320px de ancho), me los empieza a dibujar uno debajo del otro, es decir hace:

MENU 1 | MENU 2 | MENU 3
MENU 4
MENU 5

¿Habría alguna otra forma de hacerlo?

Gracias por la ayuda!