レイアウトを崩さない多階層メニューの設定

グローバルメニューを多階層メニューにした時、メニューを表示すると以下ようにレイアウトが全体的に下にズレて崩れてしまうことがあります。左から二番目のメニューにマウスカーソルを合わせてみてください。

このようなサイトを見かけることはありますし、jQueryのプラグインを使用したスマホメニューでもよく見かけます。

特に気にしない人は気にしませんが、気にする人は気にします。なので、ほんの少しのCSSの追加で解決してみます。

上記コードを例にすると、子階層部分の<ul>部分に

position:absolute;

とCSSに指定してレイアウトの崩れを防いでいます。これだけです。
制作の際の参考になれば嬉しいです。

SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。