Ich versuche eine einfache Navigation zu erstellen und möchte eine horizontale Liste mit einer vertikalen Artikelliste haben:

Header 1     Header 2     Header 3
 -Sub 1       -Sub 1       -Sub 1
 -Sub 2       -Sub 2       -Sub 2
 -Sub 3       -Sub 3       -Sub 3

Ich fotografiere für dieses Markup oder ähnliches:

<ul>
    <li><strong>Header 1</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>
    <li><strong>Header 2</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>
    <li><strong>Header 3</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>

</ul>

Ich versuche, schwebende Divs für jeden Header-Abschnitt zu vermeiden.

Ich habe versucht, zwei CSS-Klassen für die uls zu verwenden, wobei die äußere auf @ gesetzt isdisplay:inline und das innere zudisplay:block, aber ich kann es nicht zum Laufen bringen.

Wie mache ich das oder muss ich divs schweben lassen?