单击父

Question

我使用_s作为基础制作wordpress主题。我想尝试菜单的样式。到目前为止，我在菜单上没有任何特定的CSS。我查看了Twenty Sixteen主题的（响应式）菜单，我想要同样的菜单，但只有＆＃34;响应＆＃34;较小屏幕的菜单。在我的网站上，菜单不一定要响应。菜单（在较小的屏幕上）看起来像这样，这就是我想要的：

Twenty Sixteen主题演示：https://twentysixteendemo.wordpress.com/（你必须调整大小才能看到我正在谈论的菜单）

我想要这种类型的菜单主要是因为它具有“扩展/下拉按钮”的能力。可以在菜单中显示子内容。

所以我的问题是：我如何设置我的菜单样式，使其看起来像Twenty Sixteen主题（手机/平板电脑）菜单，包括扩展菜单子类别的按钮？

我在网上搜索了几天而没有找到相关信息。似乎每篇仅仅解决问题的文章都只是其他解释不当的文章的复制粘贴。

这是我现在为我的菜单提供的HTML：

<ul id="primary-menu" class="main-menu"><li class="has-children menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1706"><a href="#">Group 1</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1707"><a href="#">Sub Group 1</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1708"><a href="#">Image</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1709"><a href="#">Image</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1710"><a href="#">Image</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1711"><a href="#">Sub Group 2</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1712"><a href="#">Sub Group Level 3</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1713"><a href="#">Image</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1714"><a href="#">Image</a></li>
        </ul>
</li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1715"><a href="#">Image</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1730"><a href="#">Image</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1731"><a href="#">Image</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1718"><a href="#">Group 2</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1719"><a href="#">Image</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1720"><a href="#">Image</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1721"><a href="#">Group 3</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1722"><a href="#">Image</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1723"><a href="#">Image</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1724"><a href="#">Group 4</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1725"><a href="#">Sub Group 3</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1726"><a href="#">Image</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1727"><a href="#">Image</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1728"><a href="#">Image</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1729"><a href="#">Image</a></li>
</ul>
</li>
</ul>

这是我的header.php中的菜单

<div class="menu-container">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <?php wp_nav_menu(array(
        'theme_location' => 'primary',
        'sort_column' => 'menu_order',
        'menu' => 'Categories',
        'container_class' => 'main-menu',
        'menu_id' => 'primary-menu',
        'menu_class' => 'main-menu'
        ) ); ?>
    </nav><!-- #site-navigation -->
</div><!-- #menu-container -->

我的菜单现在是什么样的：

Answer 1

您可以使用javascript（jquery）或仅使用css实现此目的。

Css示例：

jquery示例：https://codyhouse.co/gem/css-multi-level-accordion-menu/

希望这会有所帮助