CSSのhover(マウスオーバー)でサブメニューを表示/非表示させる4つの方法

サブメニューを「position」でウィンドウの外に追い出して非表示にし、マウスオーバーで従来の位置に戻します。上記の例では非表示にするためにtopを-1000pxと指定していますが、メニューがページの上部にあれば少ない数値でも構いません。この辺はざっくりと指定してます。マウスオーバー時は、サブメニューを「position: relative;」と指定したheaderの左上を起点とするグローバルメニューの56px分下に表示させるという仕組みです。 ※高さ55pxというのもざっくり指定してしまったので、ブラウザによってはズレているかもしれません…。

trasformを使う方法

.sample03 ul li ul < position: absolute; top: -1000px; >.sample03 ul li:hover ul < transform: translateY(1055px); -ms-transform: translateY(1055px);/*IE９対策*/ >

Web制作をより深く学びたい人へ

About Category Tags Latest posts:Web制作・デザイン

【全て無料】バレンタインのフリーイラスト素材サイトまとめ16選(おしゃれ/かわいい/手書き系)【2026年】
ヒューマンアカデミー(たのまな) Adobeベーシック講座を解説！口コミや評判は？2年目も買える？
社会人も使える!学割版Adobe CC付きオンライン講座【プラチナスクールパートナー3校比較】
【2026年】全て無料！お正月/年賀状フリーイラスト素材サイト16選(おしゃれ/かわいい系)【令和8年/午(うま)】
【全て無料】かわいいクリスマスのフリーイラスト素材サイト18選(おしゃれ/手書き系)【2025年】

📎📎📎📎📎📎📎📎📎📎