not able to iterate through sub list in a list for search filter

So basically, I have a sidebar that contains a search feature like when you type a certain keyword on the input box, it’s supposed to iterate through all the list items and show if anything with that keyword exists. The problem is I’ve sub-options like Github is a dropdown list and contains sub lists (not the li HTML tag) like clone repo, setup ssh, and so on. The problem is I ain’t able to iterate through the sub-options. If I type up anything of the sub options, it doesn’t show up (except the first sub-option).

const dropdown = document.getElementsByClassName("dropdown-btn");

for (let i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  const dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}

function searchServices() {
  // Declare variables
  let input, filter, ul, li, a, i;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1B1D23;
  overflow-x: hidden;
  padding-top: 20px;
  margin-top: 48px;
}

.sidenav a, .dropdown-btn {
  padding: 15px 30px;
  text-decoration: none;
  color: #aaaaaa;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 300px; 
  padding: 0px 10px;
}

.active {
  background-color: #2ad9a6;
  color: white;
}

.dropdown-container {
  display: none;
  background-color: #21232a;
  padding-left: 8px;
}

.fa-caret-down {
  float: right;
  padding-right: 8px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

#myInput {
  background-image: url('../img/search.png'); 
  background-position: 15px 12px; 
  background-repeat: no-repeat; 
  background-color: #21232a;
  width: 100%;
  color: white;
  outline: none;
  padding: 12px 20px 12px 45px;
  border: 1px solid #343B48;
  margin-bottom: 12px; 
}

#myInput::placeholder{
  color: #52555d;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#setupMainName{
  font-size: 0.8rem;
  margin-top: -15px;
}

.dropdown-container a{
   margin-top: -11px;
}

.sidebarLogo{
  text-align: center;
  padding: 20px 0 40px 0;
  cursor: pointer;
}

.sidebarLogo img{
  width: 150px;
  margin: 0 auto;
}

.logoCont{
  padding: 0px !important;
}

<div class="sidenav">
          <a class="logoCont" href="index.html">

          </a>
          <input type="text" id="myInput" onkeyup="searchServices()" placeholder="Search">
          <ul id="myUL">
            <li><button  class="dropdown-btn">Github 
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-container" id="myList">
              <a href="#" style="margin-top: 0px;">
                <p id="setupSubName" >
                  Setup SSH
                </p>
                <p id="setupMainName">
                Github
                </p>
              </a>
              <a href="#" >
                <p id="setupSubName">
                  Clone Repository
                </p>
                <p id="setupMainName">
                Github
                </p>
              </a>
              <a href="#" >
                <p id="setupSubName" >
                  Commit Repository
                </p>
                <p id="setupMainName">
                Github
                </p>
              </a>
              </div>
            </li>
            <li><a href="#">To be added2</a></li>
            <li><a href="#">To be added</a></li>
            <li><a href="#">To be added</a></li>
            </ul>
        </div>