CSSで作ったドロップダウンのhoverをタップに置き換えたい

Question

現在WordPressを使ってホームページを作っています。
wp_list_categoriesでカテゴリ一覧を呼び出してメニューを作りました。
そのメニューはマウスホバーで展開するようなドロップダウンメニューにしました。
具体的には

aaaa li ul li{
overflow: hidden;
width: 100%;
height: 0;
}

のような形にして

aaaa li:hover > ul > li {
overflow: visible;
height: 38px;
}

これを追加することで、li部分にマウスをのせると、ul childrenが表示されるようにしてあります。
さらに、孫カテゴリまで展開出来るようにしてあります。

これだと、タブレット等では展開出来ないので別の要素をたそうと思いました。
色々調べた結果、jqueryを使って何とかすれば良さそうということがわかったのですが、単なるhoverではなく、ホバーして下にあるリストを表示しなければいけないため、良い事例を見つけることが出来ませんでした。

どのようにすれば今の機能を保持したまま、タブレット等のタップでも展開出来るように出来るのでしょうか。
よろしくお願いいたします。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、具体的に現在のコード（HTML/CSS）を提示されたほうが回答を得やすいと思います。

Answer 1

ただいま実機がないので確認ができないのですが、以下のサイトが参考になるでしょうか
タッチデバイスでCSSの:activeや:hoverを機能させる。