Dropdown Javascript menus overlapping

Question

The goal is to, in the header, make the first two titles open as expandable dropdown menus. I have little to no experience in coding, especially javascript and jquery. I have achieved the effect for one button ( https://gyazo.com/c8abca5a6c73fc5e4856e85727b57b55 ) and whenever I add the second one, they effectively overlap, loose format and locate themselves in the wrong positions.

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

Code for the header (2 dropdown + 2 normal titles):

  <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>

Yes, I know this is untidy, however I am a novice and still in the stage of learning. Thanks in advance.

Answer 1

Both dropdowns have the same id: " myDropdown ", change one of them and they will be seen and positioned on different places. (it's really bad to have elements with the same id on a page).

To furthermore position them, change their css position from ' fixed ' to ' absolute ', you can then experiment with the top , left , right , bottom to find a nice spot (this is easily achievable since their parent elements have a position set to ' relative ', and all of their childs will be positioned absolutely refering to them instead of the window itself).