CSSのみで作るドロップダウンメニュー

■ポイント

・外側のナビの各項目の中に入れる入れ子構造にする
・疑似クラス:hoverとdisplay:none; display:block;で表示を切り替える

■HTML

<ul id="gNav">
    <li><a>Gナビメニュー</a>
      　<ul id="subNav"> <!--サブナビを入れ子にする -->
           <li><a>サブナビ1</a></li>
           <li><a>サブナビ2</a></li>
           <li><a>サブナビ3</a></li>
        </ul>
    </li>
</ul>

■CSS

#subNav{
  display:none; /* hoverされるまで非表示にする　*/
}
#gNav li:hover #subNav{
 display:block;　/* Gナビメニューにマウスオーバーした際に表示させる　*/
}