html - css メニュー サブメニュー 水平

Question

このようなCSSメニューとサブメニューを作成するにはどうすればよいですか。

メニューをクリックまたはマウスを移動すると、下部に小さなアイコンが表示されます

Answer 1

HTML

<ul class="nav">
   <li><a href=#><span>Main item text</span><span class="bullet"></span></a>
      <ul>
        <li><a href=#><span>Sub item text</span><span class="bullet"></span></a></li>
      </ul>
   </li>
</ul>

CSS

ul.nav li ul { position: absolute; display: none; }
ul.nav li { float: left; }
ul.nav li:hover ul { display: block; }

もちろん、リストを適切にスタイルする必要があります。ここで、弾丸http://jsfiddle.net/9r4Lf/1/でどのように機能するかを試すことができます