【CSSのみ】ホバーしたときにサブメニューを表示させる方法

ホバーしたときに、サブメニューをひょいっと表示させる方法をご紹介。

jQueryを使わずにCSSのみで実装します。

それでは作り方、サンプルコードを見ていきましょう。

ホバーしたときに表示されるサブメニューのサンプルコード

デモ

See the Pen ホバーでサブメニュー表示 by 石森裕也 (@yuyaphotograph) on CodePen.

HTML

HTML
<ul class="Nav">
  <li class="Nav-Item"><a href="" class="Nav-Item-Link">項目</a></li>
  <li class="Nav-Item isParent"><a href="" class="Nav-Item-Link">ホバーしてね</a><ul class="Nav-Item-Sub"><li class="Nav-Item-Sub-Item"><a href="" class="Nav-Item-Sub-Item-Link">サブ項目</a></li><li class="Nav-Item-Sub-Item"><a href="" class="Nav-Item-Sub-Item-Link">サブ項目</a></li><li class="Nav-Item-Sub-Item"><a href="" class="Nav-Item-Sub-Item-Link">サブ項目</a></li></ul></li>
  <li class="Nav-Item"><a href="" class="Nav-Item-Link">項目</a></li>
  <li class="Nav-Item"><a href="" class="Nav-Item-Link">項目</a></li>
</ul>

HTMLがごちゃごちゃとしていて分かりづらいと思います。

サブメニュー部分のHTMLだけを改行つきで分かりやすく抜き出すと以下となります。

▼▼▼

肝となるHTML
<li class="Nav-Item isParent">
  <a href="" class="Nav-Item-Link">ホバーしてね</a>
  <ul class="Nav-Item-Sub">
    <li class="Nav-Item-Sub-Item"><a href="" class="Nav-Item-Sub-Item-Link">サブ項目</a></li>
    <li class="Nav-Item-Sub-Item"><a href="" class="Nav-Item-Sub-Item-Link">サブ項目</a></li>
    <li class="Nav-Item-Sub-Item"><a href="" class="Nav-Item-Sub-Item-Link">サブ項目</a></li>
  </ul>
</li>

liタグの中にulタグを入れることでサブメニューを表現します。

CSS

CSS
/* ---------------------------- */
/* --- ナビゲーション --- */
/* ---------------------------- */
.Nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.Nav-Item {
  position: relative;
  padding: 28px 0;
  display: flex;
  flex-wrap: nowrap;
  flex: none;
  height: 100%;
  letter-spacing: 0.05em;
  font-size: 16px;
}
.Nav-Item-Link {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.Nav-Item-Link:hover {
  color: #0fbfae;
}
.Nav-Item-Sub {
  position: absolute;
  bottom: -124px;/*よしなに*/
  left: -14px;/*よしなに*/
  display: none;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 14px;
  width: 240px;/*よしなに*/
  background: rgba(255,255,255,0.6);
}
.Nav-Item-Sub-Item {
  letter-spacing: 0.05em;
  color: #000;
  font-size: 16px;
}
.Nav-Item-Sub-Item:hover {
  color: #0fbfae;
}
.Nav-Item-Sub-Item-Link {
  padding-top: 12px;
  padding-bottom: 12px;
}
.Nav-Item.isParent:hover .Nav-Item-Sub {
  display: block;
}
/* ---------------------------- */
/* --- それ以外 --- */
/* ---------------------------- */
a {
  display: block;
  text-decoration: none;
  color: inherit;
}

サブメニュー「Nav-Item-Sub」は初期状態で非表示にします。

親要素のliタグにホバーしたときに、display:blockでひょいひょいっと表示してあげます。

サブメニューの親要素のliタグには、CSSで指定しやすいように「isParent」クラスを付与しましょう。

次はこの記事!

ホバーしたときに、背景色と文字色が反転する、シンプルなボタンの作り方ホバーしたときに、背景色と文字色が反転する、シンプルなボタンの作り方 ホバーしたときに、左から右へ塗りつぶすように背景色が変わるボタンの作り方ホバーしたときに、左から右へ塗りつぶすように背景色が変わるボタンの作り方 ホバーしたときに、中心から波紋が広がっていくように背景色が反転するボタンの作り方ホバーしたときに、中心から波紋が広がっていくように背景色が反転するボタンの作り方