Menu à 3 niveau et 3e niveau sur 2 colonnes

J'ai un code html/css d'un menu horizontal, et si le 3e niveau est chargé, je souhaite le mettre sur plusieurs colonnes (par défaut une seule).

html :

<nav>
<div id="menu">
    <ul class="niveau1">
    <li ><a href="../accueil/accueil.php">Accueil</a></li> <!-- n1 -->
 
<!--<li><a href="#">Photos</a>
    <ul>-->
        <li><a href="#">Photos</a>
            <ul class="niveau2">
 
                    <li><a href="#">Saison 2012/2013</a>
 
                        <ul class="niveau3">
                            <li><a href="../mucoroue/mucoroue.php">Muco roue 2013</a></li>                          
                            <li><a href="../ambel/ambel.php">rando à Ambel</a></li>
                            <li><a href="../canoe_drome/canoe_drome.php">canoë sur la Drôme</a></li>
                            <li><a href="../peisey-nancroix-2013/pn-2013.php">coupe de France à Peisey-Nancroix</a></li>
                            <li><a href="../stage-2013/stage-2013.php">stage 2013</a></li>
                            <li><a href="../AG2013/AG2013.php">AG 2013</a></li>
                            <li><a href="../sortie0501/sortie0501.php">sortie du 05/01</a></li>
                            <li><a href="../rando_allieres/rando_allieres.php">Rando aux Allières</a></li>
                            <li><a href="../ski_roue/ski_roue.php">Séance de ski-roue</a></li>
                            <li><a href="../rando131410/rando131410.php">Rando des 13/14-10</a></li>
                            <li><a href="../muco-roue-2012/muco-roue-2012.php">Muco roue 2012</a></li>
                            <li><a href="../ja_2012/ja_2012.php">Journée d'accueil 2012</a></li>
                        </ul>
                    </li>
            </ul>

css : je simplifie volontairement :

/* lignes ajoutées pour mettre le niveau 3 sur 2 colonnes si chargé */
#menu .niveau3 li:nth-child(n+5)
{
    background: #ddd;
    left: 195px;
    top: -160px;
}

*Utiliser les balises de colorisation syntaxique s'il vous plait, merci
Modifié par 6l20 (28 Jun 2014 - 18:05)

column-width + height sont éventuellement une piste :http://codepen.io/anon/pen/GAEkm

ul ul ul {
  column-width:250px;
  height:300px;
}
ul ul ul li a {
  display:inline-block;
  vertical-align:top;

}