「メニューの上にカーソルを乗せるとサブメニューが表示される」というよくある動き。 CSSのみ・CSSとjQueryを組み合わせる・jQueryのみなどなど、色々な方法があると思いますが、みなさんはどのように実装していますか? 対応ブラウザやレスポンシブの有無などによっても変わってくると思いますが、先日、自分がよく使う方法とは違ったCSSのみでの実装方法を目にしたのでまとめてみました。 【この記事を書いた人】 Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細 サンプル 以下のような動きを想定したHTMLとCSSを作成します。 CSSによるhoverのデモはこちら 共通HTML <header class="sample01"> <ul> <l
![CSSのhover(マウスオーバー)でサブメニューを表示/非表示させる4つの方法 | KERENOR { ケレンオール }](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7abd94fe7c6b88604df03096c59adb8aad92ee6/height=288;version=1;width=512/https%3A%2F%2Fwww.kerenor.jp%2Fkerenor%2Fwp-content%2Fuploads%2F2016%2F10%2Fcss-hover.png)