Bonjour à tous !

J'ai une grande liste, à plusieurs niveaux (en moyenne trois), que j'aimerais séparer sur plusieurs colonnes. La séparation se fera dynamiquement (par exemple 20 éléments par colonne), ce qui veut dire qu'il peut arriver que la couper se fasse au milieu d'une liste de 3ème niveau.

Le problème, c'est que lorsque je reprends la liste dans ma 2ème colonnes, je dois recréer la hiérarchie, et j'obtiens deux bullets vide avant mon élément sous firefox, et deux retours à la ligne sous IE (voir http://20-100.ch/test.html).

Voici mon code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div style="float: left; width: 300px; border: 1px solid black; padding: 5px; margin: 10px;">
   <ul>
      <li>Catégorie 1
         <ul>
            <li>Sous catégorie 1
               <ul>
                  <li>Sous sous catégorie 1</li>
                  <li>Sous sous catégorie 2</li>
               </ul>
            </li>
            <li>Sous catégorie 2
               <ul>
                  <li>Sous sous catégorie 3</li>
                  <li>Sous sous catégorie 4</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>
<div style="float: left; width: 300px; border: 1px solid black; padding: 5px; margin: 10px;">
   <ul>
      <li>
         <ul>
            <li>
               <ul>
                  <li>Sous sous catégorie 5</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>
Y a-t-il un moyen d'obtenir le rendu voulu, c'est-à-dire une continuité des deux listes ?