WordPressのスマホ用ドロップダウンメニューを作りたい

１日かけても解決できなかったので、恥ずかしながら質問させていただきます。
現在、WordPressでスマートフォン用にモーダルウィンドウを出してカテゴリリストのメニューを作っています。

その部分はこのようなコードです

PHP
1<div class="modal-inner" ontouchstart="">
2					<ul id="smart_categorymenu">
3						<?php 
4							$catslist = wp_list_categories('echo=0&title_li=&hide_empty=0&exclude=1,65');
5							$catslist = preg_replace('/ class=\"(.*?)\"/','',$catslist);
6							echo $catslist;
7						?>
8					</ul>
9 
10</div>

これがサイトに反映されるとこうなります

HTML
1<div class="modal-inner" ontouchstart="">
2	<ul id="smart_categorymenu">
3		<li><a href="">親１</a>
4			<ul class="children">
5				<li><a href="">子１</a>
6					<ul class="children">
7					<li><a href="">孫１</a></li>
8					</ul>
9				</li>
10			<li><a href="">子２</a>
11			</li>
12			</ul>
13		</li>
14	</ul>
15</div>

これを縦長のメニューにしたいと考えています。形を作るのはあまり問題ないのですが、展開が難しいです。
まず、親をクリック（タップ）すると親が子を持っている場合、親のURLでは開かずに、子のリストを展開しなければいけません。
同様に、子が孫を持っている場合、子を開かずに孫を展開しなければいけません。
これはJqueryでやるのかなとは思っているのですが、なかなか難しいです。

さらに、展開も横にスライドして、別の縦メニューを出すような形にしてみたいです。

色々とやりたいことはあるのですが、中々検索で良い事例を見つけることが出来ませんでした。
詳しい方いましたら、教えていただければと思います。