アコーディオンパネル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンパネル</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
body, div, dl, dt, dd {
  margin: 0;
  padding: 0;
}
#wrapMenu {
  width: 500px;
  margin: 50px auto;
}
.question {
  padding: 10px;
  font-size:18px;
  font-family: Arial;
  font-weight: bold;
  border: 1px solid #DDD;
  background: #EEE;
  cursor: pointer;
}
.answer {
  padding: 25px;
  font-size: 16px;
  font-family: Arial;
  border: 1px solid #DDD;
}
</style>
</head>
<body>
<dl id="wrapMenu">
<dt class="question">Question 01</div>
<dd class="answer">Answer 01<br>Answer 01<br>Answer 01<br>Answer 01</dd>
<dt class="question">Question 02</div>
<dd class="answer">Answer 02<br>Answer 02<br>Answer 02<br>Answer 02</dd>
<dt class="question">Question 03</div>
<dd class="answer">Answer 03<br>Answer 03<br>Answer 03<br>Answer 03</dd>
</div>

<script>
//最初以外を隠す
$( '#wrapMenu .answer' ).not( ':first' ).hide();
//クリックイベント
$( '#wrapMenu .question' ).click(function() {
//スライドの処理
    if($(this).next( '.answer' ).is( ':visible' )) {
        $(this).next( '.answer' ).slideUp(300);
    } else {
        $(this).next( '.answer' ).slideDown(300).siblings( '.answer' ).slideUp(300);
    }
});
</script>
</body>
</html>

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

HTMLの記述

「unordered list」または「definition list」を設定する
「unordered list」の中に「definition list」をネストすることも可能（例では、見出しと本文のセット）
マウスオーバーではなく、クリックの場合はjQueryを利用します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<link href="css/style.css" rel="stylesheet">
</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";

/*reset*/
* {
  margin:0;
  padding:0;
}

/*menu*/
.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;
}