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

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

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

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

デモ
HTML
CSS

デモ

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

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

/* ---------------------------- */
/* --- ナビゲーション --- */
/* ---------------------------- */
.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」クラスを付与しましょう。

次はこの記事！