Was ist der beste Weg, um eine semantische Pause in einem ul-basierten navbar zu haben?

Question

Ich mache eine ul-basierte horizontale navbar, aber ich möchte zwei Ebenen haben in jedem Element, ein bisschen wie folgt aus:

     Nav item1            Nav item2             Nav item3
Nav item1 subtitle    Nav item2 subtitle    Nav item3 subtitle

Der Untertitel hat in einem anderen Stil an die Haupt nav Element sein. Ich tat dies zuerst (naiv?) Durch ap Verwendung im Inneren des li verschachtelt, aber W3C sagte konnte ich nicht Nest ap innerhalb eines li.

Im Grunde genommen, ich versuche einen br zu vermeiden, vor allem, weil das ist nicht die richtige Semantik ist es? Bin ich über diese gehen in die falsche Richtung?

EDIT: ich hinzugefügt haben sollte, möchte ich das nav Element und es ist Untertitel in der gleichen Anker-Tag, weil sie einen Link sind (und ich möchte ein: schweben zu arbeiten). Dies schließt die Verwendung von mehreren Überschriften-Tags innerhalb des li denke ich.

EDIT 2: Die Antworten waren nützlich, danke. Eine interessante Sache zu beachten - obwohl es, dass Blockspanne == div wurde gesagt, das ist nicht die Art und Weise der Validator des W3C sieht. Sie können immer eine Spanne innerhalb eines Anker verschachtelt haben, auch wenn die Anzeige des Spannweite: Block, aber Sie können nicht z verfügen über einen Display. Inline-h1 innerhalb eines Ankers, da die Validator die CSS nicht überprüft und HTML-Dateien zusammen

Answer 1

Sie könnten eine span verwenden, da das semantisch inert ist, Stil es dann mit display: block.

Answer 2

Meine Meinung ist, dass <br /> für einen Zeilenumbruch semantisch geeignet ist, einen Titel und Untertitel zu trennen. Sie können es anders mit einem <span> stylen.

Answer 3

Sie sollten eine Wörterbuch-Liste verwenden statt einer regulären ungeordneten Liste. Ihr Beispiel sollte.

<dl>
  <dt>
    Nav Item 1
  </dt>
  <dd>
    Nav Item 1 Subtitle
  </dd>
  <dt>
    Nav Item 2
  </dt>
  <dd>
    Nav Item 2 Subtitle
  </dd>
  <dt>
    Nav Item 2
  </dt>
  <dd>
    Nav Item 2 Subtitle
  </dd>
</dl>

oder in HTML5 oder XHTML 2.0 Sie tun können,

<dl>
  <di>
    <dt>
      Nav Item 1
    </dt>
    <dd>
      Nav Item 1 Subtitle
    </dd>
  </di>
  <di>
    <dt>
      Nav Item 2
    </dt>
    <dd>
      Nav Item 2 Subtitle
    </dd>
  </di>
  <di>
    <dt>
      Nav Item 2
    </dt>
    <dd>
      Nav Item 2 Subtitle
    </dd>
  </di>
</dl>

Answer 4

1. Span mit Display: Block == div
3.           

   title

             

   Unter Titel

    

(oder eine der anderen möglichen H-Tags.