title: Dropdown menu: All nested submenu opening at once?
body: <p>So I have a drop down menu, I want to toggle display on/off when the
  '+' character is clicked AND/OR hovered over parent menu-item?</p>
  
  <p><strong>Requirement:</strong> <em>The big issue I am facing is I need it do be dynamic, so when a new sub drop down menu is created  (in WordPress) it is displayed (when hovered/clicked on '+'.</em></p>
  
  <p><strong>PROBLEM: When I open the service drop down menu item ALL sub menus open? I think it might be this line:</strong> </p>
  
  <pre><code>`.main-navigation .sub-menu {
          display: none;
  }
  
   .sub-menu.toggle-on {
      display: block; 
   }`
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//  var toggleOpenBtn = document.getElementsByClassName(".dropdown-toggle");
  
  // toggleOpenBtn
  
  $( ".dropdown-toggle" ).click(function() {
   
   $( ".sub-menu" ).toggleClass("toggle-on");
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> /*
   # HEADER
   */
   *, html {
    margin: 0;
    font-size: 16px;
   }
   .site-header {
    background-color: black;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
   }
   .main-navigation {
      padding: 2rem;
      background-color: red;
     }
  
  /*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul {
    display: none;
   }
  */
  
  .main-navigation .sub-menu {
    display: none;
  }
  
   .sub-menu.toggle-on {
    display: block; 
   }
  
   .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul  {
    list-style: none;
   }
   .main-navigation ul li a {
    color: #fff;
    text-decoration: none;
   }
  
  /* First Highrarchy */
  .main-navigation ul {
   display: flex;
   justify-content: flex-end;
   align-items: center;
  }
  .main-navigation ul li  {
   margin-right: 2rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
  &lt;header id="masthead" class="site-header"&gt;
    &lt;div class="site-branding"&gt;
      &lt;div class="site-branding-text"&gt;
        &lt;p class="site-title"&gt;&lt;a href="http://localhost/wordpress/" rel="home"&gt;LOGO&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- .site-branding --&gt;
  
    &lt;nav id="site-navigation" class="main-navigation"&gt;
      &lt;button class="menu-toggle" aria-expanded="false"&gt;Primary Menu&lt;/button&gt;
      &lt;div class="menu-test-container"&gt;
        &lt;ul id="primary-menu" class="menu" aria-expanded="true"&gt;
          &lt;li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035"&gt;
            &lt;a href="http://localhost/wordpress/services/"&gt;Services&lt;/a&gt;
            &lt;button class="dropdown-toggle" aria-expanded="false"&gt;
         &lt;span class="dropdown-symbol"&gt;+&lt;/span&gt;
        &lt;/button&gt;
            &lt;ul class="sub-menu"&gt;
              &lt;li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076"&gt;
                &lt;a href="http://localhost/wordpress/asd/"&gt;Commercial&lt;/a&gt;
                &lt;button class="dropdown-toggle toggled-on" aria-expanded="true"&gt;
           &lt;span class="dropdown-symbol"&gt;-&lt;/span&gt;
          &lt;/button&gt;
                &lt;ul class="sub-menu toggled-on"&gt;
                  &lt;li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082"&gt;
                    &lt;a href="http://localhost/wordpress/asd/"&gt;Rural&lt;/a&gt;
                    &lt;button class="dropdown-toggle toggled-on" aria-expanded="true"&gt;
             &lt;span class="dropdown-symbol"&gt;-&lt;/span&gt;
            &lt;/button&gt;
                    &lt;ul class="sub-menu toggled-on"&gt;
                      &lt;li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081"&gt;
                        &lt;a href="http://localhost/wordpress/services/"&gt;Electrical&lt;/a&gt;
                        &lt;button class="dropdown-toggle" aria-expanded="false"&gt;
               &lt;span class="dropdown-symbol"&gt;+&lt;/span&gt;
              &lt;/button&gt;
                        &lt;ul class="sub-menu"&gt;
                          &lt;li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079"&gt;
                            &lt;a href="http://localhost/wordpress/gallery/"&gt;Residential&lt;/a&gt;
                            &lt;button class="dropdown-toggle" aria-expanded="false"&gt;
                 &lt;span class="dropdown-symbol"&gt;+&lt;/span&gt;
                &lt;/button&gt;
                            &lt;ul class="sub-menu"&gt;
                              &lt;li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"&gt;&lt;a href="http://localhost/wordpress/news-updates/"&gt;News Updates&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084"&gt;
            &lt;a href="http://localhost/wordpress/asd/"&gt;Projects&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045"&gt;
            &lt;a href="http://localhost/wordpress/blog/"&gt;Blog&lt;/a&gt;
            &lt;button class="dropdown-toggle" aria-expanded="false"&gt;
         &lt;span class="dropdown-symbol"&gt;+&lt;/span&gt;
        &lt;/button&gt;
            &lt;ul class="sub-menu"&gt;
              &lt;li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078"&gt;
                &lt;a href="http://localhost/wordpress/news-updates/"&gt;About&lt;/a&gt;
                &lt;button class="dropdown-toggle" aria-expanded="false"&gt;
           &lt;span class="dropdown-symbol"&gt;+&lt;/span&gt;
          &lt;/button&gt;
                &lt;ul class="sub-menu"&gt;
                  &lt;li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"&gt;
                    &lt;a href="http://localhost/wordpress/news-updates/"&gt;News Updates&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!-- #site-navigation --&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/header&gt;
  
  &lt;body&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>