html - 水平フローティング リスト アイテムの複数行

Question

Web サイトのナビゲーション メニューを作成しようとしています。リンクはページの上部近くに水平に配置されており、各リンクの下に短い説明が必要です。ユーザーがメインのリンク テキストまたはその下の説明をクリックすると、適切なページに移動する必要があります。さらに、各メニュー項目には、箇条書きとして三角形のアイコンが必要です。これは私が達成しようとしていることの写真です。

1 行だけのリストを横に並べることができます。しかし、追加しようとすると壊れます。

<nav id = "header-navigation">
  <ul>
    <li>
      <a href="/">
        Home
        <span class = "subnavigation">Foo!</span>
      </a>
    </li>
    <li>
      <a href="/contact">
        Contact
         <span class = "subnavigation">Bar</span>
    </li>
  </ul>
</nav><!-- header-navigation -->

そしてCSSで：

nav#header-navigation {
  margin-top: 160px;
  display: block;
}

nav#header-navigation ul li:before {
    content: url("../images/main-navigation-bullet.png");
    vertical-align: top;
}

nav#header-navigation ul li {
    display: inline;
    text-transform: uppercase;
    min-height: 22px;
}

nav#header-navigation ul li span.subnavigation {
  display: block;
  color: #999;
  font-size: 90%;
  margin-top: -10px;
  margin-left: 15px;
}

これは私が得るものです。

また、nav#header-navigation ul li を配置しようとしましfloat: leftたが、それにより、リスト項目が、画面の上部のように、それらが属する div の外側に浮かんでしまいます。

私が見つけたもう 1 つの問題は、Chrome がvertical-align: top;属性を正しく表示しないため、サブナビゲーション テキストがブラウザの間違った場所に表示されることです。

これをブラウザ間で機能させる方法はありますか、それとも画像を使用するのが最善の方法ですか?