Witam serdecznie

Chciałbym wyświetlić drzewo kategorii w taki sposób:



Wybrałem do tego listę poziomą:


W taki sposób gdy wyświetlam tylko nagłówki Kat1, Kat2... wszystko jest dobrze:



Problem pojawia się gdy do którejś kategorii próbuję dopisać podkategorię:



Wtedy display:inline jakby przestaje działać i lista wyświetla się "jedno-pod-drugim"...

Dzieje się tak samo gdy do którejś z sekcji LI wrzucę nową listę...



Jak mogę to rozwiązać?

[HTML] pobierz, plaintext 
<style>
ul.category {
    float: left;
}
</style>
 
    <ul class="category">
        <li><h4>Kategoria</h4>
            <ul>
                <li>Pod kategoria</li>
                <li>Pod kategoria #2</li>
                <li>Pod kategoria #3</li>
            </ul>
        </li>        
    </ul>
    <ul class="category">
        <li><h4>Kategoria</h4>
            <ul>
                <li>Pod kategoria</li>
                <li>Pod kategoria #2</li>
                <li>Pod kategoria #3</li>
            </ul>
        </li>        
    </ul>
    <ul class="category">
        <li><h4>Kategoria</h4>
            <ul>
                <li>Pod kategoria</li>
                <li>Pod kategoria #2</li>
                <li>Pod kategoria #3</li>
            </ul>
        </li>        
    </ul>
    <div style="clear: both"></div>
[HTML] pobierz, plaintext 

Wszystko byłoby dobrze gdyby nie to, że jeśli mam np 15 kategorii głównych i nie mieszczą się one w jednej linii to przez 'floaty' nowy wiersz kategorii rozjeżdża się...

P.S. Oczywiście poszczególnie kategorie mają różną ilość podkategorii i to powoduje rozjeżdżanie...