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

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

See the Pen CodePen Home 階層メニュー(absolute無し) by AkiraSatou (@SatoWeb) on CodePen.dark

プラグインでも見かける事象

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

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

子階層部分に“ position ”を指定する

See the Pen 階層メニュー(absolute有り) by AkiraSatou (@SatoWeb) on CodePen.dark

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

position:absolute;

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

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