Wordpress マウスオーバーで表示するドロップダウンメニューをクリックで表示する

いつもお世話になっております。

現在Wordpressでwebページを作成しております。
外観→メニューから、メニュー構成を

・ホーム
・ニュース
・ドロップダウンメニュー
・ └サブ１
・ └サブ２
・ └サブ３

のようにしています。
現状では「ドロップダウンメニュー」にマウスオーバーでサブ１～サブ３が表示されています。
また「ドロップダウンメニュー」ページも存在している状況です。

これを「ドロップダウンメニュー」をクリックするとサブ１～サブ３が表示するようにし、再びクリックでサブ１～サブ３を非表示という動きにしたいと考えております（ドロップダウンメニューページは存在しない）。

これを実現するにはどのようにすればよいのでしょうか。
参考になるサイトでも構いませんのでご教示いただけますと幸いです。

よろしくお願いいたします。

Lhankor_Mhy

2019/08/22 05:52

コードをご提示ください。

行動規範の内容に同意します

回答1件

ベストアンサー

汎用性はおいておいて、命題の範囲で動作すればよいのであれば

CSS
1<style>
2#dropdown{display:none;}
3#dropdown+ul{display:none;}
4#dropdown:checked+ul{display:block;}
5</style>
6<ul>
7<li>ホーム</li>
8<li>ニュース</li>
9<li><label for="dropdown">ドロップダウンメニュー</label>
10<input type="checkbox" id="dropdown">
11<ul>
12<li>サブ１</li>
13<li>サブ２</li>
14<li>サブ３</li>
15</ul>
16</li></ul>