トグルのクリックによって表示されるのではなく、マウスオーバーによって表示させたい。

Wordpressのテーマで、下記のように変更を希望しています。

【現状】
メニューのトグルをクリックすると、サブメニューが出てくる。

【希望】
メニューにマウスオーバーするだけで、サブメニューが出てくる。サブメニューからマウスを離すと表示は消える。(トグルさんには消えていただきたい。)

おそらく下記のjavulascriptとPHPのあたりを変えればいいのかな、、??
と思っているのですが、
どこをどうすればいいのでしょうか？

【現状のjavascriptとPHP】

(function() {
            $( '#navigation .current-menu-item' ).parents( '.sub-menu' ).show()
                .prev( '.submenu-switch' ).find( '.fa' ).removeClass( 'fa-angle-down' ).addClass( 'fa-angle-up' );

            $( '#navigation .submenu-switch' ).click(function() {
                var $switch = $(this);
                $switch.next( '.sub-menu' ).toggle( 500, function() {
                    $switch.find( '.fa' ).toggleClass( 'fa-angle-down fa-angle-up' );

                    if ( 'true' == $switch.attr( 'aria-expanded' ) ) {
                        $switch.attr( 'aria-expanded', 'false' );
                    } else {
                        $switch.attr( 'aria-expanded', 'true' );
                    }

                    $screenReader = $switch.find( '.screen-reader-text' );
                    if ( aesblo.expandMenu == $screenReader.text() ) {
                        $screenReader.text( aesblo.collapseMenu );
                    } else {
                        $screenReader.text( aesblo.expandMenu );
                    }
                });
            });

        })();

<div class="sidebar-buttons clearfix">
            <?php if ( is_active_sidebar( 'secondary-sidebar' ) ) : ?>
                <button type="button" class="active-secondary-sidebar button-toggle">
            <span class="screen-reader-text"><?php _e( 'Toggle to the secondary sidebar', 'aesblo' ); ?> </span>
          <span class="fa fa-ellipsis-h fa-2x"></span>
        </button>
            <?php endif; ?>
            <button type="button" class="close-primary-sidebar button-toggle">
          <span class="screen-reader-text"><?php _e( 'Close the primary sidebar', 'aesblo' ); ?> </span>
        <span class="fa fa-close fa-2x"></span>
      </button>
        </div>

まったく要領をえない質問でまことにすみません。
「詳しい人だと見ればわかるのかもな」という、なんとも安易な発想と甘えた根性でダメ元な質問です。
どなたかお詳しい方が、もし、いらっしゃいましたらよろしくお願いいたしますm(__)m

追記です。
【出力されたHTML】はこうなっているようでございます。

<div id="primary-sidebar-content" class="primary-sidebar-content">

        <div class="sidebar-buttons clearfix">
                        <button type="button" class="close-primary-sidebar button-toggle">
          <span class="screen-reader-text">Close the primary sidebar </span>
        <span class="fa fa-close fa-2x"></span>
      </button>
        </div>

                    <nav id="navigation" class="site-navigation" role="navigation" aria-label="Primary Menu">
                <ul id="ごちゃごちゃと数字と％が書いてある。。。。