Lista vertical em uma lista horizontal
Estou tentando criar uma navegação básica e gostaria de ter uma lista horizontal com uma lista de itens verticais:
Header 1 Header 2 Header 3
-Sub 1 -Sub 1 -Sub 1
-Sub 2 -Sub 2 -Sub 2
-Sub 3 -Sub 3 -Sub 3
Estou filmando para esta marcação, ou algo semelhante:
<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>
Estou tentando evitar divs flutuantes para cada seção do cabeçalho.
Eu tenho tentado usar duas classes css para as uls, com o conjunto externo paradisplay:inline
e o interior paradisplay:block
, mas não consigo fazê-lo funcionar.
Como faço isso ou tenho que flutuar divs?