點擊父母時的Wordpress展開子菜單

我使用_s作爲wordpress主題作爲基礎。我正在嘗試設置菜單的樣式。到目前爲止，我在菜單上沒有任何特定的CSS。我查看了二十六個主題的（響應式）菜單，我想要菜單的相同，但只有小屏幕的「響應式」菜單。在我的網站上，菜單並不一定要有響應。（在較小的屏幕）菜單看起來是這樣的，這就是我想要的：點擊父母時的Wordpress展開子菜單

二十六主題演示：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 -->

我的菜單是什麼樣子現在：