[css] Menu poziome (ul-li) a w nim menu pionowe (ul-li)..? Opcje

[jasina]

Witam serdecznie

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

Kod

Kategoria1          Kategoria2         Kategoria3 ....itd
Pod1                pod1               pod1
pod2                pod2               pod2

Wybrałem do tego listę poziomą:

Kod

<ul style="list-style-type:none;padding:0px;margin:0px">            
<li style="display:inline;">...

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

Kod

<ul style="list-style-type:none;padding:0px;margin:0px">            
<li style="display:inline;">K1</li>
<li style="display:inline;">K2</li>
<li style="display:inline;">K3</li>
</ul>

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

Kod

<ul style="list-style-type:none;padding:0px;margin:0px">            
<li style="display:inline;">K1<br>podkategoria<br>podkategoria2</li>
<li style="display:inline;">K2</li>
<li style="display:inline;">K3</li>
</ul>

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ę...

Kod

<ul style="list-style-type:none;padding:0px;margin:0px">            
<li style="display:inline;">
   <ul><li>K1</li><li>podkategoria</li><li>podkategoria2</li></ul>
</li>
<li style="display:inline;">K2</li>
<li style="display:inline;">K3</li>
</ul>

Jak mogę to rozwiązać?

[strife]

[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