在移动设备上隐藏子菜单

Question

我在移动设备上的菜单遇到麻烦。该菜单在移动设备上处于隐藏状态，但是当我单击该图标以打开菜单时，它将显示所有菜单项，并且还会显示任何子菜单。我想隐藏子菜单，并在有人将鼠标悬停在顶部菜单项上方时弹出。任何帮助表示赞赏。

示例：

代码：

显示菜单的代码：

<nav id="site-navigation" class="site-nav" role="navigation">
    <button id="primary_menu" class="menu-toggle"><img src="<?php echo get_template_directory_uri() . '/images/hamburger.jpg' ?>" /></button>               
    <?php 
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'container_class' => 'main-nav',
        'container' => 'nav',
        'menu_class' => 'nav-menu',
    )); 
    ?>
</nav>

CSS：

/* 
    Navigation Menu styling for mobile
*/
@media screen and (max-width: 800px) { 
    .site-nav {
        margin-top: 24px;
        margin-top: 1.714285714rem;
        text-align: left;
    }

    .site-nav li {
        margin-top: 10px
        font-size: 12px;
        font-size: 0.857142857rem;
        line-height: 1.42857143;
        list-style: none;
    }

    .site-nav a {
        color: black;
        text-decoration: none;
        font-size: 20px;
    }

    .site-nav a:hover,
    .site-nav a:focus {
        color: #21759b;
    }

    .site-nav ul.nav-menu,
    .site-nav div.nav-menu > ul {
        display: none;
    }

    .site-nav ul.nav-menu.toggled-on,
    .menu-toggle {
        display: inline-block;
        background-color: white;
        font-size: 20px;
        border: none;
    }

    .site-nav nav ul li.current-menu-item > a:link,
    .site-nav nav ul li.current-menu-item > a:visited,
    .site-nav nav ul li.current-page_ancester > a:link,
    .site-nav nav ul li.current-page_ancester > a:visited {
        color: black;
        font-weight: bold;
    }
}

Javascript（单击按钮时显示菜单）

( function() {
    var nav = document.getElementById( 'site-navigation' ), button, menu;
    if ( ! nav ) {
        return;
    }

    button = nav.getElementsByTagName( 'button' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
        return;
    }

    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = 'none';
        return;
    }

    button.onclick = function() {
        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
            menu.className = 'nav-menu';
        }

        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.replace( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )(jQuery);