Ошибка в раскрывающемся меню [CSS, HTML, Javascript]

Question

Я некоторое время искал код выпадающего меню. Ресурсы здесь мне пока не помогли. Если вам удастся найти соответствующую ссылку, пожалуйста, поделитесь ею :) Моя основная проблема заключается в том, что выпадающее меню не отображается. Очень ценю вашу помощь.

Вот соответствующий скрипт :)

<script type="text/javascript"> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
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> 

Вот мои стили

ul.topnav { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: lightgrey; 
    } 
    ul.topnav li { 
     float: left; 
    } 
    ul.topnav li a { 
     display: block; 
     color: black; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 
    /* The container <div> - needed to position the dropdown content */ 

    .topnav { 
     position: relative; 
    } 
    ul.topnav li a:hover:not(.active) { 
     background-color: grey; 
    } 
    ul.topnav li a.active { 
     background-color: #2a8d7b; 
    } 
    ul.topnav li.right { 
     float: right; 
    } 
    @media screen and (max-width: 600px) { 
     ul.topnav li.right, 
     ul.topnav li { 
     float: none; 
     } 
    } 
    .dropbtn { 
     background-color: #4CAF50; 
     color: white; 
     padding: 16px; 
     font-size: 16px; 
     border: none; 
     cursor: pointer; 
    } 
    /* Dropdown button on hover & focus */ 

    .dropbtn:focus { 
     background-color: #3e8e41; 
    } 
    /* Dropdown Content (Hidden by Default) */ 

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

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

Вот мой HTML

<div> 
    <ul class="topnav"> 
    <li> 
     <a onclick="myFunction()" href="#" class=dropbtn ">Filter</a> 
    </li> 
     <div id="myDropdown " class="dropdown-content "> 
      <a href="# ">Link 1</a> 
      <a href="# ">Link 2</a> 
      <a href="# ">Link 3</a> 
     </div> 
    <li><a href="#news ">Profile</a></li> 
    <li><a href="#contact ">Contact</a></li> 
    <li class="right "><a href="#about ">Impressum</a></li> 
    </ul> 
</div> 

Answer 1

Можете ли вы Pls попробовать этот

<div> 
    <ul class="topnav"> 
    <li> 
     <a onclick="myFunction()" href="#" class="dropbtn">Filter</a> 
    </li> 
     <div id="myDropdown " class="dropdown-content "> 
      <a href="# ">Link 1</a> 
      <a href="# ">Link 2</a> 
      <a href="# ">Link 3</a> 
     </div> 
    <li><a href="#news ">Profile</a></li> 
    <li><a href="#contact ">Contact</a></li> 
    <li class="right "><a href="#about ">Impressum</a></li> 
    </ul> 
</div>