■ 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<link href="style.css" rel="stylesheet">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<ul class="accordion">
<li>
<div>
<h2>特長1</h2>
<p>特長1の詳細</p>
</div>
</li>

<li>
<div>
<h2>特長2</h2>
<p>特長2の詳細</p>
</div>
</li>

<li>
<div>
<h2>特長3</h2>
<p>特長3の詳細</p>
</div>
</li>

<li>
<div>
<h2>特長4</h2>
<p>特長4の詳細</p>
</div>
</li>

<li>
<div>
<h2>特長5</h2>
<p>特長5の詳細</p>
</div>
</li>
</ul>
</body>
</html>

@charset "UTF-8";


* {
	margin:0;
	padding:0;
}


.accordion {
	width: 400px;
	height: 300px;
	margin-left:10px; 
}

.accordion li {
  color: #555;
  background: #fff;
	margin-bottom:5px;
  height:20%;
	overflow: hidden;
	-webkit-transition:all 0.4s ease-in;
	transition: 0.4s all ease-in;
	-moz-transition:all 0.4s ease-in;
	-o-transition:all 0.4s ease-in;
}

.accordion li:hover {
	height:70%;
}

.accordion li h2 {
  color: #333;
  margin-bottom: 10px;
  padding: 5px;
	background: #eee;
	border: 1px solid #ccc;	
}

.accordion li:hover h2 {
	color: #fff;
	background:#81AF86;
	border: 1px solid #ccc;
}

.accordion li div {
	padding-top:12px;
}

これでアコーディオンがCSSで作れる。　.accordion li のところにある↓が
-webkit-transition:all 0.4s ease-in;
transition: 0.4s all ease-in;
-moz-transition:all 0.4s ease-in;
-o-transition:all 0.4s ease-in;

マウスをホバーさせたときの動きの速さを司っている。
数字の所を大きくするとゆっくり。10とか入れるとすごい遅い。0.1だと速い等。一行目の所の数字をいぢれば速さが変わるのが判ったが、残り3段はいまいち不明。