▲このメニュー上にマウスを乗せると、ドロップダウンメニューが表示されます。

▼どんな構成になっているか見るために、全部のメニューを同時に表示できるボタンも用意しました。 下記のボタンをクリックすると、すべてのメニューを表示できます。

※この「第3回」のサンプルでは、一度開いたメニューは、他のメニューを開くか「HOME」の上にマウスを乗せない限り閉じません。 自動的に閉じるには、タイマーを活用する方法などが必要です。その方法は次回以降の記事で紹介予定です。
※JavaScriptでgetElementByIdメソッドが使えない（古い）ブラウザではこのサンプルは動作しません。ここではソースをシンプルにするため、それらの対策は一切施していません。この点についても次回以降の記事で紹介予定です。

※このページを作っているHTMLソースをコピーして使えば、最低限のドロップダウンメニューは実現できますから、ご自由にご活用下さい。