ステージ星川管理組合サイトのトップページはドロップダウン型メニューを採用しています。
メインメニューにマウスポインタを重ねたときにサブメニューが展開されていくメニューで、1クリックで目的のページへ誘導できるメリットがあります。
メインレベルメニューを横並びに、2階層目以降のサブメニューを縦並びとします。マウスポインタが重なっているときにそのサブメニューを表示するようにします。
メインメニュー、サブメニューともに、マウスが置かれたメニューの色を変えて、その(サブ)メニューが選択されていることを示します。
メニュー構造を ul 要素の入れ子で表現します。
HTMLだけで、次項のスタイルを指定する前の表示です。
下図は完成形です。
これを実現するソースとともに、それぞれの指定が有り無しの場合の表示を挿入し比較します。
.menu li:hover ul の設定
.menu li:hover ul はホームページ・ビルダーでは設定できない。
代わりに、 .menu a:hover ul を設定し、後で a を li にソースで変更する。