title: Can't get javascript dropdown to work
body: <p>I have a Javascript menu. The hover and click for the main menu items work however, I cannot get the dropdown to work. </p>
  
  <p>menu.js is</p>
  
  <pre><code> /* 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 &lt; 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 &lt; dropdowns.length; i++) {
         var openDropdown = dropdowns[i];
         //if (openDropdown.classList.contains('show')) {
         openDropdown.classList.remove('show');
       }
     }
   }
  </code></pre>
  
  <p>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</p>
  
  <pre><code> &lt;td&gt;&lt;button onmouseover="myFunction();"
   onclick="location.href='property-mngt.html';" value="Property Management"
   class="dropbtn"&gt;PROPERTY MANAGEMENT&lt;/button&gt;
  &lt;div id="pmd" class="dropdown-content"&gt; test &lt;/div&gt;
   &lt;/td&gt;
  </code></pre>
  
  <p>The CSS is </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>My goal is to have the dropdown list appear when hovering over that particular menu item. If I change the html to <code>&lt;div id="pmd" class="dropdown-content.show"&gt; test &lt;/div&gt;</code> 'test' shows on the menu. </p>
  
  <p>I'm stuck on getting the mouseover of that menu item to show the dropdown. </p>