マウスオーバー時のヘッダーのドロップダウンメニュー（必須）

cssでヘッダー部分に作るマウスオーバーした時のドロップダウンメニューの作り方の解説をします。

作り方をすぐ忘れる私への解説です。

デモは↓になります。（カクカク感がありますが実際はもっとするする動きます）

完成形のコードは↓になります。

コードの解説をしますがコードの内容を理解するのがキツい場合は7行目〜9行目にマウスオーバーしたい内容を入れてとりあえずコピペで使えるようにしてある程度コーディングに慣れてから理解してください。

「メニュー1」と書いてる部分をマウスオーバーするとドロップダウンメニューが出るようにします。

親要素（4行目の「menu__parent」）をマウスオーバーした時に子要素（6行目〜10行目）が出てくるようにするのをposition:relativeとposition:absoluteを使います。

position:relativeは親要素（4行目の「menu__parent」）に使いcssが43行目〜45行目にあります。

position:absoluteは子要素（6行目のmenu__child）に使いコードが46行目〜53行目にあります。

子要素ですが最初は親要素からの位置を指定（48行目のtop:30px）してマウスオーバーした時に下に少しずれる（55行目）ようにします。

マウスオーバーする前は非表示にしたいので34行目〜37行目のコードがありマウオーバーした時に表示するために54行目〜59行目のコードがあります。

非表示にするときですがdisplay:noneの状態から表示するときにdisplay:blockを使うとtransition-durationが適用できなくなるのでopacityを使っています。

これで完成です。

他の部分は調節なので省略します。

●いいねをつけてもらえると励みになります。