CSS3：CSSだけでアコーディオンメニュー

表示サンプルはこちら。
http://jsdo.it/goto_jp/pdzy

リストリンクをメニューにしてますが、開閉させるだけなら実はCSS3は必要ありません。

ポイントとしては下記のようにサブメニューの<li>のサイズを変えるだけです。

.menu li ul li {
  ～
  height: 0;
  overflow: hidden;
  -webkit-transition: .2s ease-in-out;
}
.menu li:hover ul li {
  height: 30px;
}

CSS3のtransitionを付けることでヌルッとした動きにアニメーションしています。

矢印のアニメーションについてもhover時にtransform:rotateの値を変えているだけです。

.menu li a:after {
  ～
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -webkit-transition: .2s ease-in-out;
}
.menu li:hover a:after {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}