Vertikale Liste innerhalb einer horizontalen Liste
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?