質問にあるHTMLに手を加えずに、HTMLとCSSのみでアコーディオンメニューを実装するのは難しいです。
これは、現状ではHTMLとCSSのみでアコーディオンメニューを実装するにはinput要素がほぼ必須となるからです。(:hover擬似クラスを利用する方法もありますが、とてもスマートフォン向けとは言えません)
しかし、jQueryなどのJavaScriptを利用するのであれば可能です。
質問にあるHTMLが分かり辛いので、とりあえず「IDが4の要素をクリックする度に、その中にあるリスト要素を開閉させる」というものを用意しました。
これをHTMLのbodyタグ直前あたりに追加する事でとりあえず動作すると思います。
HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
2<script type="text/javascript">
3// まずリスト要素を非表示にする
4$( '#4' ).find( 'ul' ).hide();
5
6// IDが4の要素をクリックした時
7$( '#4' ).click( function () {
8 // その中にあるリスト要素を開閉させる
9 $( this ).find( 'ul' ).slideToggle();
10});
11</script>
ちなみに、このコードが何を行っているかはこちらの#13あたりまでを見ていけばなんとなく分かると思います。
jQuery入門 (全20回) - プログラミングならドットインストール
その後、こちらも見ておくとより理解しやすいです。
jQuery リファレンス:目次 - jQuery入門講座
jQuery リファレンス:複数のセレクタ(or)
jQuery リファレンス:find
jQuery リファレンス:hide
jQuery リファレンス:slideToggle
また、jQueryはJavaScriptを扱いやすくするためのライブラリなので、この機会にJavaScriptを学んでみるのも良いと思います。