CSSのみでプルダウンメニュー作る

プルダウンメニューを作るjQueryプラグインとかあるけど、それCSSでできるよ！

ポイントは子どもセレクタ。

以下のようなHTMLを用意する。

<div class="parent">
  マウスオーバー！！
  <div class="child">
    <ul>
      <li><a href="#1">その１</a></li>
      <li><a href="#2">その２</a></li>
    </ul>
  </div>
</div>

CSSは以下のようにする。

.child{
  display: none;
}
.parent:hover > .child{
  display: block;
}

するとあら不思議！
.parentの上にカーソルを持って来ると.childが表示！

でも自分はアニメーションしたかったので、CSSをこう書いた。

.child {
  height: 0;
  overflow: hidden;
  transition: height 150ms linear; /* prefix省略 */
}
.parent:hover > .child {
  height: 80px;
}

こんなふうにすればネストするのも簡単だ。
ネストしたサンプルは下。

サンプルはこちら