ヘッダーメニューをマウスオンでプルダウン

サンプル: クリックでサブメニュー表示・非表示 | codepen
※ scssで書いてますのでcss欄の下向き三角からview compiledでcssに変換したものを子テーマstyle.cssにコピペして必要に応じて変更修正してください。

こんな感じかと思います。
デフォルトのhover部分でhoverしてもサブメニューが非表示のままになるように変更したのと、サブメニューを持っている要素がクリックされた場合にshowと言うクラスをつけるようにしました。

hoverしたら勝手に表示されるメニューとは違い、どこにサブメニューがあるかを表示しておかないとアレかなと思いまして、サブメニューを持っているメニューの後ろに三角アイコンが出るようにしました。fontawesomeのアイコンなので、ここらは好きなものに変更したりしてください。

サブメニューを持っているclass(.menu-item-has-children)にshowと言うclassをつけたり外したりすることでサブメニューを表示・非表示としています。ここから、showがついている間ずっとサブメニューが表示されると言うのが問題点です。
一応他のサブメニューを表示した時はそれまでに開いているものを閉じるようにしました(サブメニューが開くのは常に一つまでにしました)が、何かしらのサブメニューが開かれている時にそれを自動で閉じるわけではないので、再度同じメニューをクリックして閉じる必要があります。ここらが注意点でしょうか。

スバラシイ

but
子メニューがリンクできない
Why Mr.Hidekichi?

あ、

$("#navi").find(".menu-item-has-children a")

だとその子要素のaもリンク無効になるので、

$("#navi").find(".menu-item-has-children > a")

でイケると思います。

サンプルは修正しました。

Thank U Mr.Hidekichi