メインメニューをマウスオーバーしてサブメニューが表示されるが、サブメニューが消えるタイミングがおかしい

Wordpressを使っています。

ふつう、サブメニューがマウスオーバーで表示されたら、それが消えるタイミングは、「サブメニューからマウスを離したとき」だと思います、が、なぜか、「メインメニューからマウスを離したとき」に消えてしまいます。

つまり、サブメニューをクリックできないんです。
なぜなら、マウスをメインメニューから話した途端に、サブメニューが消えてしまうためです。サブメニューの部分にマウスはあるのに、です。

この困った仕様は、一体どこを治せばいいのでしょうか？

まとめますと、

【現状】
メインメニューAにマウスオーバーしてサブメニューXYZが表示されるが、XYZをクリックするためにマウスをメニューAから移動させてXYZに移すと、XYZが消えてしまう。

【希望】
一度サブメニューXYZが表示されたら、「メニューAからマウスを離したとき」ではなく、「サブメニューXYZから離したとき」に、XYZが消えるようにしたい。

ということです。

いま、javascriptはこうなっています。

(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' ).hover(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 );
                    }
                });
            });

        })();

PHPはこうです。

<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>

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="ごちゃごちゃと数字と％が書いてある。。。。

お分かりになる方がもしいらっしゃいましたら、どうぞよろしくおねがいいたします。<m(__)m>