CSSだけで作るドロップダウンメニュー

CSSだけで作るドロップダウンメニューです。
親メニューliにposition: relative;を効かせ相対位置に、
子メニューulにposition: absolute;を効かせ絶対位置にしています。

子メニューulにはvisibility: hidden;で見えなくし、overflow: hidden;ではみ出し防止しててあります。子メニューliにはheight: 0;で高さをなくしています。そして親メニューをhoverしたときに子メニューulにvisibility: visible;をかけて出現させ、子メニューに高さを指定してあげます。absoluteが掛かっているため、高さを指定する必要があります。
ちなみにvisibility: hidden;の代わりにdisplay:noneをかけると、要素そのものがなくなってしますのでtransitionが効かなくなります。アニメーションをかけたいならvisibilityやheight:0を組み合わせて使うべきです。

HTML

CSS

デモページ

  • コーダーのための計算機