trying to make drop down menus with javascript

Question

I am trying to make a nav bar with two drop down menus "appliances" and "furniture" i can get one to work but i am having trouble with the second one, i am assuming my function is only applying to one of them at a time but cannot figure out why the other is not working nor can i get it to work. `

<table>
  <tr>
     <td><a href="home.html">Home</a>
     <td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Appliances</a>
    <div class="dropdown-content" id="drop">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
     <td><td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Furniture</a>
    <div class="dropdown-content" id="drop">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
     <td><a href="bed.html">Bedding</a>
     <td><a href="contact.html">Contact Us</a>
     <td><a href="cart.html">Shopping Cart</a>
  </tr>
</table>


<script>

function myFunction() {
    document.getElementById("drop").classList.toggle("show");   
}

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

here is the css

    td a, .dropbtn {
    display: inline-block;
    color: #b35900;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

td a:hover, .dropdown:hover .dropbtn {
    background-color:#ff0000;
}

td.dropdown {
    display: inline-block;
}

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

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

.dropdown-content a:hover {background-color: #ff0000}

Answer 1

<table>
  <tr>
   <td><a href="home.html">Home</a>
   <td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction("drop1")">Appliances</a>
<div class="dropdown-content" id="drop1">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
 <td><td class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction("drop2")">Furniture</a>
<div class="dropdown-content" id="drop2">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
     <td><a href="bed.html">Bedding</a>
     <td><a href="contact.html">Contact Us</a>
     <td><a href="cart.html">Shopping Cart</a>
  </tr>
</table>


<script>

    function myFunction(id) {
        document.getElementById(id).classList.toggle("show");   
    }

</script>

At least its a beginning. You need unique ids on everything in your dom, so the getElemenetById call will only find one of them. Adding the id as a param will seperate them.

Answer 2

For something like a menu, using id is probably more hassle than its worth (down the line anyway)

When an event is fired an event variable is passed to the handler, it's got everything you need to be able to identify the pressed element

function myFunction(e) {
    e=e||event;
    if (e.target.classList.contains("dropdown")) {
      e.target.classList.toggle("show");
    }
}

I haven't tested this, and I dont think it will work with the code you've presented as there is no css definition for "show" unless you missed it when pasting it.