Can't get javascript dropdown to work

Question

I have a Javascript menu. The hover and click for the main menu items work however, I cannot get the dropdown to work.

menu.js is

 /* When the user clicks on the button,
     toggle between hiding and showing the dropdown content */
 function myFunction() {
   //document.getElementById("myDropdown").classList.toggle("show");
   //document.getElementsByClassName("dropdown-content").show);
   //document.getElementById("pmd").classList.toggle("show");
   pmd.show;
 }
 }
 // Close the dropdown 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');
       }
     }
   }
   if(!event.target.matches('.dropbtnpm')) {
     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');
     }
   }
 }

My HTML for the menu where I want a dropdown is as follows. I'm just trying to get it to work with text of 'test'. I can do the link later

 <td><button onmouseover="myFunction();"
 onclick="location.href='property-mngt.html';" value="Property Management"
 class="dropbtn">PROPERTY MANAGEMENT</button>
<div id="pmd" class="dropdown-content"> test </div>
 </td>

The CSS is

.dropbtn {
  border:  none;
  padding: 16px;
  cursor: pointer;
  background-color: #ffffff;
  color: black;
  height: 125px;
  min-height: 125px;
  font-size: 12px;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: #004b8d;
  color: white;
  font-size: 12px;
}
.dropdown {
  position: relative;
  color: #ffff33;
}
.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  display: none;
}
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  color: white;
}
.dropdown a:hover {
  background-color: #f1f1f1;
  color: black;
}
.show {
  border: 1px solid #33ccff;
  display: block;
  visibility: visible;
  background-color: #004b8d;
  color: white;
  font-family: Arial,Helvetica,sans-serif;
  font-size: small;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

My goal is to have the dropdown list appear when hovering over that particular menu item. If I change the html to <div id="pmd" class="dropdown-content.show"> test </div> 'test' shows on the menu.

I'm stuck on getting the mouseover of that menu item to show the dropdown.

Answer 1

you're trying to show multiple elements. take the first and and display it correctly.

document.getElementsByClassName('dropdown-content')[0].style.display = 'block'

or use use the document.querySelector('dropdown-content')