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.

The JavaScript code doesn't seem to be complete. What should pmd.show do, what is pmd and there is at least one curly brace too much. — gus27
– gus27, Commented Nov 19, 2016 at 19:07
Just because I'm curious: why are you using javascript to show a menu? Why not just use CSS and HTML, that way you make sure your menu is available to everyone, even people with both JS and CSS turned off. — junkfoodjunkie
– junkfoodjunkie, Commented Nov 19, 2016 at 19:08
Also why are you using <button> and script to do what an <a href> is meant for? — charlietfl
– charlietfl, Commented Nov 19, 2016 at 19:09
Based on junkfoodjunkie's comment I changed it over to CSS/HTML. That part is working now. gus27 - pmd was for 'property management dropdown' I was just trying to debug with that. charlietfl - I was trying to get a very particular look and feel for the menu and needed large blocks to be clickable. I was trying to do it without creating menu images since there might be changes. At any rate, the menu is now working using just CSS/Html. — Chris Mendla
– Chris Mendla, Commented Nov 21, 2016 at 2:37

Robin F. · Accepted Answer · 2016-11-19 19:10:22Z

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

answered Nov 19, 2016 at 19:10

Robin F.

1,21512 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Mendla Over a year ago

I used the second option and it worked. However, based on the comments above, I changed the menu over to CSS/HTML.

Collectives™ on Stack Overflow

Can't get javascript dropdown to work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related