アコーディオンメニューを作成する場合、jQueryを使用すれば簡単に作成できます。

まずはデモ。

■デモ

クリックするとjQueryの「slideToggle」で見えない部分を表示させます。
「slideToggle」は、clickイベント等と併用してクリックするとアニメーションでdisplay:none、またはdisplay:blockにしてくれるすぐれものです。

また、ボタンが変化するように「addClass」と「removeClass」でclassの削除、追加をしています。

以下ソースです。

【CSS】

.accordion > dl > dt {
    padding: 0px 10px;
}
.accordion > dl > dt, .accordion > dl > dd > ul > li, .accordion > ul > li {
    border-bottom: 1px solid #BDBDBD;
    height: 63px;
    line-height: 63px;
    position: relative;
}
.accordion > dl > dt:after {
    content: "+";
    position: absolute;
    right: 10px;
    top: 50%;
    line-height: initial;
    margin: -14px 0 0;
    font-size: 20px;
    font-weight: bold;
}
.accordion > dl > dt.dopen:after {
    content: "-";
}
.accordion > dl > dd {
    background-color: #424242;
    display: none;
}
.accordion > dl > dt, .accordion > dl > dd > ul > li, .accordion > ul > li {
    border-bottom: 1px solid #BDBDBD;
    height: 63px;
    line-height: 63px;
    position: relative;
}
.accordion >dl > dd > ul > li:after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 15px;
    margin: -4px 0px 0px;
}
.accordion > dl > dd a, .accordion > ul > li a {
    display: block;
    padding: 0px 20px;
    box-sizing: border-box;
    color:#fff;
}

【JavaScript】

$(function(){
$('.accordion > dl > dt').on('click',function(){
		var Dopenclass = $(this).attr('class');
		$(this).next('dd').slideToggle();
		if(!Dopenclass){
			$(this).addClass('dopen');
		}else{
			$(this).removeClass('dopen');
		}
	});
});

【HTML】

<div class="accordion">
<dl>
<dt>メニュー1</dt>
<dd>
<ul>
<li><a href="">メニュー1の情報1</a></li>
<li><a href="">メニュー1の情報2</a></li>
<li><a href="">メニュー1の情報3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>メニュー2</dt>
<dd>
<ul>
<li><a href="">メニュー1の情報1</a></li>
<li><a href="">メニュー1の情報2</a></li>
<li><a href="">メニュー1の情報3</a></li>
</ul>
</dd>
</dl>
</div>

スマホなどになると、表示させる部分が限られたりします。
アコーディオン等でユーザビリティを向上させましょう。