Вертикальный список в горизонтальном списке
Я пытаюсь создать базовую навигацию, и я хотел бы иметь горизонтальный список с вертикальным списком элементов:
Header 1 Header 2 Header 3
-Sub 1 -Sub 1 -Sub 1
-Sub 2 -Sub 2 -Sub 2
-Sub 3 -Sub 3 -Sub 3
Я снимаю для этой разметки или чего-то подобного:
<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>
Я пытаюсь избежать плавающих div для каждого раздела заголовка.
Я пытался использовать два класса CSS для UL с внешним установленным наdisplay:inline
и внутреннийdisplay:block
, но я не могу заставить его работать.
Как мне это сделать, или я должен плавать div?