is there a dropdown menu as a component? Can't find it online : I am trying to make a website which is accessible to download pdf and mp3 files of sermons but I am not able because I can't find out how to make a drop down menu thing.

I tried looking it up going on bootstrap, W3schools etc to no avail.

<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>
                  <li>
                    <ul><div class="dropdown">
                      <button onclick="myFunction()" class="dropbtn">Lesson </button>
                      <div id="myDropdown" class="dropdown-content">
                        <a href="#" download>Lesson PDF</a>
                        <a href="#" download>MP3 File</a>
                      </div>
                    </div>
                    </ul>
                    <ul><div class="dropdown">
                      <button onclick="myFunction()" class="dropbtn">Lesson </button>
                      <div id="myDropdown" class="dropdown-content">
                        <a href="#" download>Lesson PDF</a>
                        <a href="#" download>MP3 File</a>
                      </div>
                    </div>
                    </ul>
                    <ul><div class="dropdown">
                      <button onclick="myFunction()" class="dropbtn">Lesson 3</button>
                      <div id="myDropdown" class="dropdown-content">
                        <a href="#" download>Lesson PDF</a>
                        <a href="#" download>MP3 File</a>
                      </div>
                    </div>
                    </ul>
                    <ul><div class="dropdown">
                      <button onclick="myFunction()" class="dropbtn">Lesson 4</button>
                      <div id="myDropdown" class="dropdown-content">
                        <a href="#" download>Lesson PDF</a>
                        <a href="#" download>MP3 File</a>
                      </div>
                    </div>
                    </ul>
                    <ul><div class="dropdown">
                      <button onclick="myFunction()" class="dropbtn">Lesson 5</button>
                      <div id="myDropdown" class="dropdown-content">
                        <a href="#" download>Lesson PDF</a>
                        <a href="#" download>MP3 File</a>
                      </div>
                    </div>
                    </ul>
                    <ul><div class="dropdown">
                      <button onclick="myFunction()" class="dropbtn">Lesson 6</button>
                      <div id="myDropdown" class="dropdown-content">
                        <a href="#" download>Lesson PDF</a>
                        <a href="#" download>MP3 File</a>
                      </div>
                    </div>
                    </ul>
                  </li>
                
              </div>

this is the best I can do but its not good enough