Wordpress erweitern Untermenü beim Klicken auf Eltern

Question

Ich mache ein Wordpress Theme mit _s als Basis. Ich versuche, das Menü zu stylen. Bis jetzt habe ich kein bestimmtes CSS auf der Speisekarte. Ich habe mir das (responsive) Menü für das Thema Twenty Sixteen angeschaut, und ich möchte das gleiche Menü haben, aber nur das "responsive" Menü für kleinere Bildschirme. Auf meiner Website muss das Menü jedoch nicht reaktionsfähig sein. Das Menü (auf kleineren Bildschirmen) sieht wie folgt aus, das ist, was ich will:

Twenty Sixteen Thema Demo: https://twentysixteendemo.wordpress.com/ (Sie müssen einen kleinen Bildschirm, um die Größe des Menüs zu sehen, ich rede)

Ich möchte diese Art von Menü vor allem, weil es die Möglichkeit für eine "erweitern/Dropdown-Schaltfläche", die Unterinhalte im Menü anzeigen kann.

Also meine Frage ist: Wie kann ich mein Menü so gestalten, dass es wie das Menü des Themes Twenty Sixteen (Handy/Tablet) aussieht, einschließlich der Schaltfläche, die die Menüunterkategorien erweitert?

Ich habe das Web seit Tagen gesucht, ohne Informationen dazu zu finden. Es scheint, dass jeder Artikel, der nur das Problem anspricht, nur ein Copy-Paste anderer schlecht erklärter Artikel ist.

Dies ist das gerenderte HTML ich für mein Menü jetzt haben:

<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> 

Dies ist das Menü in meinem 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 --> 

Was mein Menü aussieht jetzt:

Answer 1

Sie können dies mit Javascript (jquery) oder nur mit CSS erreichen.

Css Beispiel: https://codyhouse.co/gem/css-multi-level-accordion-menu/

jquery Beispiel: https://perishablepress.com/jquery-accordion-menu-tutorial/

hoffe, das hilft