【HTML/CSS】CSSだけでドロップダウンメニューを作る

今回はドロップダウンメニューをCSSだけで作成したいと思います。

ドロップダウンメニューとは

リストなどをクリックしたり、マウスカーソルを合わせた時にさらにリストが降りてくるようなメニューの表示のことを言います。
↓こんな感じのメニューです。

完成系

HAMLとCSSはこんな感じです。（HAMLはhtmlをRails特有に書きやすくしたものですがhtmlでも動作します）

■HAML

<li>
  トップ
　  <ul class="sub-list">
　    　<li class="sub">プロフィール</li>
    　　<li class="sub">プロダクト</li>
  　</ul>
</li>

■CSS

li {
  line-height: 50px;
  margin-left: 30px;
  &:hover ul.sub-list{
    display: block;
  }
}
ul.sub-list {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 1;
  display: none;
  background-color: #fafafa;
  width: 200px;
  height: 100px;
  li {
    margin-left: 0;
    &:hover {
      background-color: red;
    }
  }
}

手順

まずはホバーさせた時に表示されるメニューを作成します

ポイントは以下の部分です。
position: absolute;　#強制的にメニューの位置を固定します
z-index: 1; #メニューが背景画像などの下にくぐってしまわないようにします
display: none; #ホバーした時に表示されてほしいので、一旦このメニューを隠します。

ul.sub-list {
  position: absolute;
  top: 50px;
  z-index: 1;
  display: none;
  background-color: #fafafa;
  width: 200px;
  height: 100px;
  li {
    margin-left: 0;
    }
  }
}

ホバーした時に隠していたメニューを表示するようにします。

ここでのポイントは擬似要素のhoverを使うことです。
仕組みとしてはliを&:hoverした時にul.sub-listをdisplay: block(隠していたものを表示)するよ、ということになる。
&:hover ul.sub-list{
display: block;
}

li {
  line-height: 50px;
  margin-left: 30px;
  &:hover ul.sub-list{
    display: block;
  }
}

最後にホバーした時のリストもカーソルを合わせた時に背景色が変化するようにします。

ここも擬似要素のhoverを使うことで、liをhoverした時にbackground-color: red;にするよ、ということになる。

li {
  margin-left: 0;
  &:hover {
    background-color: red;
  }

擬似要素を使いこなせるといろんなことがCSSだけでできて面白そう