如果你用自己的html标记和css开发这个主题，那么应该相当容易。。。

<?php wp_nav_menu( array( \'theme_location\' => \'primary\', \'menu_class\' => \'topNav\', \'after\' => \'<span> </span>\' ) ); ?>

您会注意到这个菜单PHP生成了一个无序列表，您的子菜单是一个嵌套的无序列表。

在dom中查看生成的标记，它看起来像这样。。。

<ul class="menu">

    <li class="menu-item">
        <a href="...">Home</a>
    </li>

    <li class="menu-item current-menu-parent">  
        <a href="...">Store</a>

        <ul class="sub-menu" style="display: none;">

            <li class="sub-menu-item">
                <a href="...">My Account</a>
            </li>

            <li class="sub-menu-item current-menu-item">
                <a href="...">Track your order</a>
            </li>

            <li class="sub-menu-item">
                <a href="...">Checkout - Pay</a>
            </li>

        </ul>

    </li>

    <li class="menu-item">
        <a href="...">Workshop</a>
    </li>

    <li class="menu-item">
        <a href="...">Gallery</a>
    </li>

</ul>

您可以在标记中看到wordpress为每个元素生成了一个类。

当您的菜单项处于活动状态时，wordpress add的活动类current-menu-item 或current-menu-parent 到李家

因此，使用下面这样的jquery，您可以控制这些子元素的可见性。。。

var allSubmenus = $(\'.sub-menu\').hide();
// this variable makes all sub menu ul\'s \'display: none;\'

$(\'li.current-menu-parent, li.current-menu-item\').find(\'ul\').show();
// if these li\'s have current class\'s, they\'re set to \'display: block\', this is for page reloads so the current menu is visible on page load.

$(\'li.menu-item a\').click(function() {
    allSubmenus.hide();
    $(this).parent().find(\'ul\').show();
});
// this basically, when a menu link is clicked, hides all sub menu\'s using our variable, then finds any child ul\'s (sub menu) and set\'s to \'display block\'

然后在此之后，您必须聪明地使用css并定位ul.sub-menu 对父级绝对ul.menu { position: relative } - 并确保li.menu-item 和ul.menu 溢出设置为可见，但li.menu-item 必须没有定位。

如果你不能理解CSS，请告诉我。

<小时>

UPDATE

我几乎刚刚意识到，如果你的子菜单只出现在current-menu-item 页面本身，并且您不希望在主菜单的另一页上显示子菜单。。。然后您只需像这样设置css，不需要jQuery。。。（但也使用上述相同的css方法）

ul.menu {
   position: relative;
   overflow: visible;
}

li.menu-item {
   /* No positioning */
   overflow: visible;
   float: left;
}

ul.sub-menu {
   display: none;
   position: absolute;
}

li.sub-menu-item {
   float: left;
}

li.current-menu-parent ul,
li.current-menu-item ul {
   display: block !important;
}