How can I make clickable list with sublinks ?

Question

i am trying to make a clickable menu, and trying to make it toggle using javascript and css, but I want to make the each also to have sub-menus also toggle, and I trying to do it mainly with javascript, how can I make it?

Here is my code:

HTML:

<div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">|||</button>
    <div id="myDropdown" class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
            <div class="child-dropdown">
                <a href="#">Sublink 1</a>
                <a href="#">Sublink 1</a>
                <a href="#">Sublink 1</a>
            </div>
        <a href="#">Link 3</a>
            <div class="child-dropdown">
                <a href="#">Sublink 1</a>
                <a href="#">Sublink 1</a>
                <a href="#">Sublink 1</a>
            </div>
    </div>
</div>

Javascript:

  <script>
   function myFunction() {  
       document.getElementById("myDropdown").classList.toggle("show");
   }

 window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

css

.dropbtn {
     background-color: #cc0000;
     color: white;
     padding: 16px;
     font-size: 16px;
     border: none;
     cursor: pointer;
     position:relative;
 }

 .dropbtn:hover, .dropbtn:focus {
     background-color: #e6e6e6;
 }

 .dropdown {
     position: relative;
     display: inline-block;
 }

 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #e6e6e6;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }

  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
   }

   .dropdown-content a:hover {background-color: #cc0000}

   .show {display:block;}

Answer 1

With the given markup, javascript would not be even necessary for links inside #myDropdown : you could just use :focus pseudoclass like so

#myDropdown a:focus + div { 
   display: block;
}

Of course this works as long as your link is focused: if you want to be able to have something else focused (or open many submenus) you could use a bit of javascript like

[].forEach.call(document.querySelectorAll('#myDropdown > a'), function(l) {
     l.addEventListener('click', function() {
         l.classList.toggle('open');
     }, false);
});

or with event delegation on #myDropdown

document.getElementById('myDropdown').addEventListener('click', function(evt) {
    var target = evt.target;
    if (target.nodeName.toLowerCase() === 'a') {
        target.classList.toggle('open');
    }
}, false);

and this CSS

#myDropdown div {  display: none; }
#myDropdown a.open + div {  display: block; }

Codepen Demo