title: How to show only First Level parent and children in dropdown? Javascript
body: <p>How to show only first level parent from drop-down? For the mobile menu, I use this <a href="https://www.jqueryscript.net/demo/Sticky-Header-Navigation-Plugin-jQuery-mhead/" rel="nofollow noreferrer">https://www.jqueryscript.net/demo/Sticky-Header-Navigation-Plugin-jQuery-mhead/</a> like a plugin and this logic works perfectly. I need the same menu but for desktop. I need to do this in custom js, Html, CSS or maybe jquery. I will provide you how I try to do but not working properly. How should will work.. When select "1st Level" I need in drop-down only "1st Level" and "2nd Level" sub menu. I don't need "1st Level" from another list. When click on "1st Level" only show "1st Level" and 2nd Level". When click on 2nd Level only show 2nd Level on top and bellow "3rd Level"
  Example how to work fine is on click on 1st Level Another</p>
  
  <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>const links = document.querySelectorAll('li a');
  
  links.forEach( function(el) {
  
   const parent = el.parentNode.parentNode.previousElementSibling;
    
   el.addEventListener('click', function() {
    if (el.classList.contains('selected')) {
        
     if (parent !== null) {
      parent.style.display = 'block';
     }
        
     el.nextElementSibling.style.display = 'none';
     el.classList.remove('selected');
    } else {
        if (el.nextElementSibling !== null) {
          console.log(el.nextElementSibling);
          el.nextElementSibling.style.display = 'block';
          el.classList.add('selected');
        }
     if (parent !== null &amp;&amp; el.nextElementSibling !== null) {
      parent.style.display = 'none';
     }
    }
   }, false);
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   box-sizing: border-box;
  }
  
  body {
   display: flex;
   padding-top: 40px;
  }
  
  .dropdown {
   position: relative;
   display: inline-block;
   margin: 0 auto;
  }
  .dropdown .dropbtn {
   color: #ffffff;
   font-size: 17px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   height: 55px;
   background-color: #000;
   padding: 12px 50px;
   position: relative;
   width: 360px;
   text-align: left;
  }
  .dropdown .dropbtn i {
   margin-left: 30px;
   color: #eee;
   position: absolute;
   top: 50%;
   right: 25px;
   transform: translateY(-50%);
  }
  .dropdown .dropbtn .arrow {
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid #8191aa;
   margin: 100%;
   padding-top: 4px;
   z-index: 999;
  }
  
  .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   width: 330px;
   z-index: 999;
  }
  .dropdown-content a {
   color: black;
   padding: 12px 25px;
   text-decoration: none;
   display: flex;
   justify-content: flex-start;
   width: 100%;
  }
  .dropdown-content a:hover {
   background-color: #F8F8F8;
  }
  .dropdown-content a span {
   display: inline-block;
   cursor: pointer;
   position: absolute;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
  }
  .dropdown-content a span:after {
   content: '';
   display: inline-block;
   width: 9px;
   height: 9px;
   border-top: 0.2em solid #ababab;
   border-right: 0.2em solid #ababab;
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
  }
  .dropdown-content a.selected {
   padding-left: 70px;
  }
  .dropdown-content a.selected span {
   left: 40px;
   top: 25%;
   right: auto;
   transform: translateY(0);
   transform: rotate(180deg);
  }
  .dropdown-content .left {
   display: inline-block;
   cursor: pointer;
   position: absolute;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
  }
  .dropdown-content .left:after {
   content: '';
   display: inline-block;
   width: 29px;
   height: 29px;
   border-top: 0.2em solid #ababab;
   border-right: 0.2em solid #ababab;
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
  }
  .dropdown-content .item-has-children a {
   position: relative;
  }
  
  .dropdown:hover .dropdown-content {
   display: block;
   background: white;
   opacity: 0.95;
   width: 100%;
  }
  
  .hr2 {
   height: 1px;
   background: #ccc;
   border-bottom: 1px solid #fff;
   border-top: 1px solid #ccc;
  }
  
  .sub-menu {
   display: none;
  }
  
  .sub-menu.selected {
   display: flex;
   flex-direction: column;
   transition: transform 0.6s;
  }
  
  ul {
   list-style: none;
   padding: 0 0px;
   width: 100%;
   height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="dropdown"&gt;
      &lt;button class="dropbtn"&gt;Dropdown&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;div class="dropdown-content"&gt;
          &lt;ul&gt;
              &lt;li class="item-has-children"&gt;
                  &lt;a href="#" class="1"&gt;1st Level&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                      &lt;li&gt;
                          &lt;a href="#" class="2"&gt;2nd Level &lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="sub-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;3rd Level&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;3rd Level &lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                       &lt;li&gt;
                          &lt;a href="#" class="2"&gt;2nd Level another&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="sub-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;3rd Level&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;3rd Level &lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
             &lt;ul&gt;
              &lt;li class="item-has-children"&gt;
                  &lt;a href="#" class="1"&gt;1st Level&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                      &lt;li&gt;
                          &lt;a href="#" class="2"&gt;2nd Level another&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="sub-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;3rd Level&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;3rd Level &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;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>