【发布时间】：2016-04-20 19:41:10
【问题描述】：
我正在使用 _s 作为基础制作一个 wordpress 主题。我正在尝试设置菜单样式。到目前为止，我的菜单上没有任何特定的 CSS。我已经查看了 26 主题的（响应式）菜单，我希望拥有相同的菜单，但只有较小屏幕的“响应式”菜单。在我的网站上，菜单不一定是响应式的。菜单（在较小的屏幕上）看起来像这样，这就是我想要的：
二十一十六主题演示：https://twentysixteendemo.wordpress.com/（你必须调整到小屏幕才能看到我说的菜单）
我想要这种类型的菜单主要是因为它具有“展开/下拉按钮”的功能，可以在菜单中显示子内容。
所以我的问题是：如何设置菜单样式，使其看起来像 26 主题（手机/平板电脑）的菜单，包括扩展菜单子类别的按钮？
我已经在网上搜索了几天，但没有找到这方面的信息。似乎每一篇仅仅解决这个问题的文章都只是复制粘贴了其他解释不好的文章。
这是我现在为我的菜单渲染的 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 -->
我的菜单现在的样子：
【问题讨论】：