アコーディオンメニューDEMO

基本形（2階層）

基本形（3階層）

開いているメニューと閉じているメニューが混在

jQuery

※親メニューは .toggle_menu のクリックで、子メニューは li のクリックで ul 内が開いたり閉じたりするだけです。
jQueryは、1.9以降を用意してください。

CSS

CSSは汚いです、ごめんなさい。でも、難しいことは何もしていないので、みれば分かると思います。

ul, li {
　　padding: 0;
　　margin: 0;
}
.ac_menu {
　　width: 300px;
　　padding: 0 ;
　　margin: 0;
　　list-style: none;
　　border-radius:7px;
　　border: 1px solid #aaaaaa;
}
.ac_menu p {
　　color: #ffffff;
　　font-size: 16px;
　　line-height: 3.0;
　　padding-left: 10px;
　　margin: 0;
}
.toggle_menu {
　　cursor: pointer;
　　background-color: #b2b2b2;
}
.open_close {
　　display: block;
}
.close_open {
　　display: none;
}
.oya_1 {
　　color: #ffffff;
　　font-size: 14px;
　　line-height: 3.0;
　　background-color: #c3c3c3;
}
.oya_2 {
　　color: #ffffff;
　　font-size: 14px;
　　line-height: 3.0;
　　background-color: #d4d4d4;
}
.ad10p{
　　padding-left: 10px;
}
nav li {
　　font-size: 14px;
　　line-height: 3.0;
　　cursor: pointer;
　　width: 100%;
　　background-color: #e5e5e5;
　　border-top: 1px solid #aaaaaa;
　　display: block;
}
nav li a{
　　color: #555555;
　　padding-left: 10px;
　　display: block;
}
nav li a:hover {
　　color: #0000FF;
}

HTML

HTMLサンプルは、開いているメニューと閉じているメニューが混在しているタイプを紹介しておきます。
開いている状態から閉じるか、閉じている状態から開くのかは、
<ul> のクラス指定で、.open_close と .close_openの違いです。
2階層にしても、3階層にしても、必要な部分の <ul>~~</ul> を使えばいいと思います。
メディアクエリでレスポンシブ化するときにも、.open_close の display: block;　→　display: none;だけかな？

混在型　HTML