アコーディオンメニューのスクロールについて。

Question

スマホサイトを作成しています。

メニューボタンを押すと、オーバーレイ画面になり、その画面上にアコーディオンメニューを設置しています。

質問
アコーディオンメニューは開けるのですが、画面以上開くとそれ以下を見ることができません。
スクロールしても、オーバーレイ下の画面が動くのみです。
アコーディオンメニュー上でスクロールするようにするにはどうしたらいいですか。

---【JS】-------------------

<script> $(function() { $("#btn").click(function() { $("#overlay").fadeIn(); /*ふわっと表示*/ }); $("#close").click(function() { $("#overlay").fadeOut(); /*ふわっと消える*/ }); }); </script> <script> $(function(){ $("#acMenu dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> <script> </script> <script> $(function(){ $("#about dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5, user-scalable=yes"> <script> (function($){ $(function() {

    $('.menuGroup .groupName').on('click', function() {
        $(this).next().slideToggle();
        $(this).toggleClass('on');
    });
 
});

})(jQuery);
</script>

---【CSS】-------------------
/--メニュー/オーバーレイ--/
#btn{
background: #000;
color: #eeeeee;
display:block;
margin: 30px auto;
width: 100px;
text-align: center;
font-size: 15px;
padding:5px 0;
border-radius: 3px;
cursor: pointer;
}

#overlay{
display: none;
width: 100%;
height:100%;
text-align: center;
position: fixed;
top: 0;
z-index: 100;
background: rgba(0,0,0,0.7);
}

#close{
background: #eeeeee url(images/ico.jpg) no-repeat 10px center;
color: #000;
width: 70px;
margin: auto;
text-align: center;
font-size: 15px;
padding:5px 10px 5px 10px;
border-radius: 3px;
cursor: pointer;
margin-top:20px;
text-align:center;
}

/--メニュー--/
#container {
max-width: 100%;
padding: 0 30px;
box-sizing: border-box;
margin: 0 auto;
text-align:left;
}
#container a {
transition: .2s linear;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
-ms-transition: .2s linear;
}
.menuGroup {
border: 1px solid #2E2E2E;
background-color: #000;
color: #ffffff;
border-bottom: 0;
}
.menuGroup:last-child {
border-bottom: 1px solid #2E2E2E;
}
.menuGroup .groupName {
width:90%;
padding: 14px 16px;
cursor: pointer;
position: relative;
transition: .2s linear;
-webkit-transition: .2s linear;
-moz-transition: .2s linear;
-o-transition: .2s linear;
-ms-transition: .2s linear;
}
.menuGroup .groupName:hover,
.menuGroup .on {
background-color: #2E2E2E;
}
.menuGroup .groupName:after {
content: "▼";
position: absolute;
right: 12px;
font-size: 10px;
}
.menuGroup .on:after {
content: "▲";
font-size: 10px;
}
.menuGroup .childMenu {
display: none;
background-color: #ffffff;
color: #2E2E2E;
list-style-type:none;
}
.menuGroup a {
display: block;
padding: 14px 16px;
border-top: 1px solid #2E2E2E;
background-color: #DCDCDC;
color: #000000;
text-decoration: none;
}
.menuGroup a:hover {
background-color: #FFFFFF;
color: #2E2E2E;
}

Comments

[1000]

HTMLも掲載してほしかったですね。