CSSでアコーディオンパネル

CSS3.0 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<link href="css/ac_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>
<h2>特長1</h2>
<p>特長1の詳細</p>
</li>
<li>
<h2>特長2</h2>
<p>特長2の詳細</p>
</li>
<li>
<h2>特長3</h2>
<p>特長3の詳細</p>
</li>
<li>
<h2>特長4</h2>
<p>特長4の詳細</p>
</li>
<li>
<h2>特長5</h2>
<p>特長5の詳細</p>
</li>
<li>
<h2>特長6</h2>
<p>特長6の詳細</p>
</li>
<li>
<h2>特長7</h2>
<p>特長7の詳細</p>
</li>
<li>
<h2>特長8</h2>
<p>特長8の詳細</p>
</li>
</ul>
</body>
</html>

*{margin:0; padding:0;}

.accordion {
	width: 400px;
	height: 300px;
	margin-left:10px; /*ブラウザ上の左の空き*/
/* divをはずした代わり */
	padding-top:12px;
}


.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:80%;
}

.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;
}

/* divをはずした代わりにpでコントロール */
.accordion li p {
	padding-top:12px;
}
/*
.accordion li div {
	padding-top:12px;
}
*/


先生の使っていたアコーディオンメニューひとつひとつにかかっていたdivは削除してみた。
外すと全体が上へずれるので、acordionクラスのpadding-topで調整をかけて、
かつアコーディオンの本体のpタグにもpaddingで調整をかけた。

この状態でdivあり状態と同等の表示になる。
IEテスターでも同じ動き。（IE７だけダメなのも。。。）