Раскрывающееся меню Javascript перекрывается

Question

Цель состоит в том, чтобы в заголовке открывать первые два заголовка в виде расширяемых выпадающих меню. У меня мало опыта в кодировании, особенно javascript и jquery. Я достиг эффекта для одной кнопки (https://gyazo.com/c8abca5a6c73fc5e4856e85727b57b55), и всякий раз, когда я добавляю второй, они эффективно перекрываются, теряют формат и располагаются в неправильных положениях.

Codepen: https://codepen.io/valik140795/pen/qadXOo

Код для заголовка (2 выпадающие + 2 нормальные названия):

<ul> 
    <style> 
     .dropbtn { 
      background-color: #282828; 
      color: #AA9568; 
      padding: 0px; 
      font-size: 16px; 
      border: none; 
      cursor: pointer; 
     } 

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


     .dropdown { 
      position: absolute; 
     z-index: 999; 
      display: inline-block; 
     } 

     .dropdown-content { 
      display: none; 
      position: absolute; 
      top: 50%; 
      left: 5px; 
      z-index: 998; 
      background-color: #282828; 
      min-width: 180px; 
      overflow: auto; 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     } 

     .dropdown-content a { 
      color: #AA9568; 
      padding: 3px 5px; 
      text-decoration: none; 
      display: block; 
     } 

     .dropdown a:hover {background-color: #282828} 

     .show {display:block;} 
    </style> 

    <div class="dropdown"> 
     <button onclick="myFunction()" class="dropbtn"><a href=#fab>ФАБРИКИ</a></button> 
     <div id="myDropdown" class="dropdown-content"> 
     <a href="#nobilis">Nobilis</a> 
     <a href="#colordeseda">Color de Seda</a> 
     <a href="#eugenio">Eugenio Colombo</a> 
     <a href="#libra">Libra</a> 
     </div> 
    </div> 

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

     function filterFunction() { 
      var input, filter, ul, li, a, i; 
      input = document.getElementById("myInput"); 
      filter = input.value.toUpperCase(); 
      div = document.getElementById("myDropdown"); 
      a = div.getElementsByTagName("a"); 
      for (i = 0; i < a.length; i++) { 
       if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) { 
        a[i].style.display = ""; 
       } else { 
        a[i].style.display = "none"; 
       } 
      } 
     } 
    </script> 

    <li>|</li> 

    <style> 
     .dropbtn { 
      background-color: #282828; 
      color: #AA9568; 
      padding: 0px 0px 0px 20px; 
      font-size: 16px; 
      border: none; 
      cursor: pointer; 
     } 

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


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

     .dropdown-content1 { 
      display: none; 
      position: absolute; 
      top: 40%; 
      left: 35%; 
      z-index: 999; 
      background-color: #282828; 
      min-width: 180px; 
      overflow: auto; 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     } 

     .dropdown-content a { 
      color: #AA9568; 
      padding: 3px 5px; 
      text-decoration: none; 
      display: block; 
     } 

     .dropdown a:hover {background-color: #282828} 

     .show {display:inline;} 
    </style> 


    <div class="dropdown"> 
     <button onclick="dealerFunction()" class="dropbtn"><a href=#fab>ДИЛЕРЫ</a></button> 
     <div id="Dealersdropdown" class="dropdown-content1"> 
     <a href="#nobilis">Nobilis</a> 
     <a href="#colordeseda">Color de Seda</a> 
     <a href="#eugenio">Eugenio Colombo</a> 
     <a href="#libra">Libra</a> 
     </div> 
    </div> 

    <script> 
     /* When the user clicks on the button, 
     toggle between hiding and showing the dropdown content */ 
     function dealerFunction() { 
      document.getElementById("Dealersdropdown").classList.toggle("show"); 
     } 

     function filterFunction() { 
      var input, filter, ul, li, a, i; 
      input = document.getElementById("myInput"); 
      filter = input.value.toUpperCase(); 
      div = document.getElementById("Dealersdropdown"); 
      a = div.getElementsByTagName("a"); 
      for (i = 0; i < a.length; i++) { 
       if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) { 
        a[i].style.display = ""; 
       } else { 
        a[i].style.display = "none"; 
       } 
      } 
     } 
    </script> 

    <li>|</li> 
    <li><a href="http://www.123contactform.com/form-2178643/My-Form">Сотрудничество</a></li> 
    <li>|</li> 
    <li><a href="contact.html">Контакты</a></li> 
    </ul> 
</div> 

Да, я знаю, что это неопрятно, но я новичок и до сих пор находится в стадии обучение. Заранее спасибо.

Answer 1

Оба выпадающих списка имеют одинаковый идентификатор: «myDropdown», смените один из них, и они будут видны и расположены в разных местах. (очень сложно иметь элементы с одним и тем же идентификатором на странице).

Для более того позиционировать их, изменять их положение CSS от «фиксированной» до «абсолютной», то вы можете экспериментировать с верхней, покинул, право, дно найти (это легко достижимо, так как их родительские элементы имеют позицию, установленную на «, относительная», и все их дочерние элементы будут расположены абсолютно для них, а не для самого окна).