CSS/Javascript Dropdown Menu Issue

Question

Hi everyone I am fairly new to web design and I am currently designing a website in which I am attempting to use a dropdown menu made using CSS and Javascript. I have nearly managed to get everything working however the only problem left to solve is that the dropdown menu content appears on the left of the container rather than underneath the relevant parent menu option.

Screenshot

function myFunction1() {
  document.getElementById("myDropdown1").classList.toggle("show");
}

function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}

function myFunction3() {
  document.getElementById("myDropdown3").classList.toggle("show");
}

function myFunction4() {
  document.getElementById("myDropdown4").classList.toggle("show");
}

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

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


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn2')) {

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


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn3')) {

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


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn4')) {

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

.navbar {
  float: left;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  height: auto;
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
}

.navbar a {
  font-size: 2em;
  font-weight: 100;
  color: white;
  text-align: center;
}

.dropdown {
  width: 100%;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
  height: auto;
}

.dropdown-content1 a {
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  text-align: center;
  height: auto;
}

.dropdown-content1 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
}

.dropdown-content2 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content2 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.dropdown-content3 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
}

.dropdown-content3 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content3 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.dropdown-content4 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 16.667%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0px;
}

.dropdown-content4 a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #000000;
  border: 1px solid white;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  font-size: 2em;
}

.dropdown-content4 a:hover {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 0px;
  background-color: #FFFFFF;
  border: 1px solid black;
  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, " sans-serif";
  text-align: center;
  height: auto;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.show {
  display: block;
}

.btn1 {
  background-color: #71aace;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.btn1:hover,
.btn1:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn1 {
  background-color: #6c73b1;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn1:hover,
.dropbtn1:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn2 {
  background-color: #d3c530;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn2:hover,
.dropbtn2:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn3 {
  background-color: #82c845;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn3:hover,
.dropbtn3:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

.dropbtn4 {
  background-color: #8f65a1;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: Impact;
  border: 1px solid white;
  cursor: pointer;
  width: 16.667%;
  float: left;
}

.dropbtn4:hover,
.dropbtn4:focus {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  margin: 0px;
  font-size: 2em;
  font-family: "Impact";
  border: 1px solid black;
  cursor: pointer;
  width: 16.667%;
  float: left;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

<div class="navbar">

  <button class="btn1" value="About Us" onclick="window.location.href=" https://uklivesound.000webhostapp.com/aboutus.html>About Us</button>

  <div class="dropdown">
    <button class="dropbtn1" onclick="myFunction1()">Rehearsals</button>
    <div class="dropdown-content1" id="myDropdown1">
      <a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a>
      <a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn2" onclick="myFunction2()">Recording</button>
    <div class="dropdown-content2" id="myDropdown2">
      <a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a>
      <a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn3" onclick="myFunction3()">For Hire</button>
    <div class="dropdown-content3" id="myDropdown3">
      <a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a>
      <a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a>
      <a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a>
      <a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn4" onclick="myFunction4()">Other Services</button>
    <div class="dropdown-content4" id="myDropdown4">
      <a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a>
      <a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a>
    </div>
  </div>

  <button class="btn2" value="Contact Us" onclick="window.location.href=" https://uklivesound.000webhostapp.com/contact.html>Contact Us</button>

Answer 1

You need to give relative position to the list items with class name dropdown.

This isn't an edit of your own code, but here's an example of how the relationship between parent and child should work with dropdowns in CSS:

.dropdown-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-left: -100px;
}

Relevant JSFiddle

Answer 2

The CSS class dropdown has its width set to 100%, meaning all of your .dropdown-content1 elements contained within this parent will have the exact same width, starting from the exact same point. Which explains why you see the drop down go to the left.

Change your .dropdown class to the following:

.dropdown {
    float: left;
}

The first thing you will notice is that all of your buttons will go a bit funny.

This is because the inner CSS classes dropbtn1 and dropbtn2 etc have their width set to 16.667%. Set these widths to 100%, you will start to see the dropdown act way more "as expected".

Answer 3

You need to change the 16% width elements to be the .dropdown parent classes. Then set each dropdown-content class to be 100% of the parent. You also need to set the parent dropdown class to position: relative and the child content classes to position: absolute and then tell the browser where to put the dropdown inside the parent (top 50px down from the parent, etc).

Here is a rewrite that works for me...

EDIT: You had an error in your "About" and "Contact Us" href link notations with omitted quotes. I've also further simplified your Javascript and CSS, combining many elements and classes so you can see how this is done. It's not as simplified as it could be but I'm sure you get the idea so I'll leave further refining to you.

Javascript:

function myFunction(ele) {
  hideAll();
  ele.nextElementSibling.style.display="block";
}

function hideAll() {
  var dropdowns = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].style.display="none";
  }
}

window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        hideAll();
    }
}

HTML:

<div class="navbar">
    <div class=dropdown>
      <button class="dropbtn btn1" value="About Us" onclick="window.location.href='https://uklivesound.000webhostapp.com/aboutus.html'">About Us</button>
    </div>

    <div class="dropdown">
      <button  class="dropbtn dropbtn1" onclick="myFunction(this)">Rehearsals</button>  
      <div class="dropdown-content" id="myDropdown1">
        <a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a>
        <a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn2" onclick="myFunction(this)">Recording</button>
      <div class="dropdown-content" id="myDropdown2">
        <a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a>
        <a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn3" onclick="myFunction(this)">For Hire</button>  
      <div class="dropdown-content" id="myDropdown3">
        <a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a>
        <a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a>
        <a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a>
        <a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a>
      </div>
    </div>

    <div class="dropdown">
      <button class="dropbtn dropbtn4" onclick="myFunction(this)">Other Services</button>  
      <div class="dropdown-content" id="myDropdown4">
        <a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a>
        <a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a>
      </div>
    </div>

    <div class=dropdown>
      <button class="dropbtn btn2" value="Contact Us" onclick="window.location.href='https://uklivesound.000webhostapp.com/contact.html'">Contact Us</button>
    </div>
</div>

CSS:

.navbar {
     float:left;
     font-family:Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black,sans-serif;
     height:auto;
     width:100%;
     display:inline-block;
     margin:0;
     padding:0;
     position:relative;
 }

 .navbar a {   font-size: 2em;     font-weight: 100;
     color: white;
     text-align: center; }

 .dropdown {
    position: relative;
    float:left;
    width:16%;
    }

 .dropdown-content {
     display: none;
     position: absolute;
     top: 50px;
     background-color: #f9f9f9;
     width:100%;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
     padding:0px;
     height:auto;
     }

 .dropdown-content a {
   text-decoration: none; text-align:center; height:auto;
   display: block; width:100%; padding:0px; background-color:#000000; border: 1px solid white;
   }

 .dropdown-content a:hover {
   color: black;
   padding: 12px 16px;
   text-decoration: none; text-align:center; height:auto;
   display: block; width:100%; background-color:#FFFFFF; border: 1px solid black;
   font-family:Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black,sans-serif;
   transition-duration:0.5s; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
   }

 .dropbtn {
   color: white;
   padding:0px;  margin:0px;
   font-size:2em;
   border: 1px solid white;
   cursor:pointer; width:100%; float:left;
   }

 .dropbtn:hover, .dropbtn:focus {
   background-color:#FFFFFF;
   color: black;
   border: 1px solid black;
   font-family:Impact;
   transition-duration:0.5s;
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 }

 .btn1 {
    background-color:#71aace;
  }

 .btn2 {
    background-color:#D84E92;
  }

 .dropbtn1 {
     background-color:#6c73b1;
   }

 .dropbtn2 {
     background-color:#d3c530;
   }

 .dropbtn3 {
     background-color:#82c845;
   }

 .dropbtn4 {
     background-color:#8f65a1;
   }

Answer 4

There is a lot of unnecessary code and code duplication in your post. Much of it can be removed. You also don't have your HTML structure, class names and id's correctly set up to avoid excessive code or provide good semantics.

A menu is really just a glorified list of choices. As such, the best semantic element to use to create one is the <ul> element with <li> elements inside of it. With a little CSS styling, you can remove the bullets and change from a vertical layout to a horizontal one. This is generally how menus are made.

Next, when it comes to classes and id's. Give elements that need to be worked on uniquely id attributes and assign classes to elements that will need to be styled as part of a group. This makes styling so much simpler and removes the need for redundancy.

When it comes to JavaScript, don't use inline HTML event attributes (onclick, onmouseover, etc.). Here is another post of mine that explains the many reasons not to use that ancient way of setting up event handlers.

So, here is a modified version of your menu. You will see how much less code there is and how much simpler it is to understand.

// Get references to all elements you'll be working with:

// All the drop downs
var dd = document.querySelectorAll(".db");

// Set up each of the drop downs to invoke the toggleElement function when clicked
// and to hide the menu when the mouse moves off an open menu
for(var i = 0; i < dd.length; i++){
  dd[i].addEventListener("click", function(evt){ toggleElement(evt.target); });
  dd[i].addEventListener("mouseout", function(evt){ hideElement(evt.target); });  
}

// This one function does the job of the myFunction1 - myFunction4 functions
function toggleElement(element) {
  element.querySelector("ul").classList.toggle("hide");
}

function hideElement(element) {
  // If the element is not one of the two link buttons, hide its menu
  var el = element.querySelector("ul");
  
  if(el){
    el.classList.add("hide");
  }
}

/* Master styles for menu. The font will inherit down to children. 
   When specifying font names, use quotes around font names that contain spaces. 
   You had " sans-serif", which would never work because you included a leading
   space in the string. Plus sans-serif doesn't have a space in it, so it doesn't 
   need quotes anyway. */
.navbar {
      font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, "sans-serif";
      margin: 0;
      padding: 0;
      list-style:none;
}
 

/* These are the actual menu items*/
li { 
     text-align:center;
     color: white;
     margin:0;
     padding:0;
}
    
a { text-decoration: none; }
    
/* This simple class is applied to the drop down content from the start
   and then simply removed or added via JavaScript to show/hide them. */    
.hide { display: none; }
    
/* All drop buttons have many property values in common. Specify those once. */
.db { cursor: pointer; display:inline-block; width:calc(16.667% - 4px); }

/* Then just worry about what's different between them */
#dropbtn1, #dropbtn6 { background-color: #71aace; }
#dropbtn2 { background-color: #6c73b1; }
#dropbtn3 { background-color: #d3c530; }
#dropbtn4 { background-color: #82c845; }
#dropbtn5 { background-color: #8f65a1; }     

.dropdown-content {
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  list-style:none;
  position:absolute; /* This keeps the drop down from throwing off the layout when shown */
  padding:0;
  width:calc(16.667% - 4px); /* You have to account for the width of the borders. */
}
    
.dropdown-content li { text-align:left; }

.dropdown-content:hover {
  color: black;
  background-color: #FFFFFF;
  border: 1px solid black;
  transition-duration: 0.5s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index:-1;
  display:block;
}

/* All drop button and regular button hover and focus styles are the same, just specify once */
.db:hover, .db:focus, .btn:hover, .btn:focus {
  background-color: #FFFFFF;
  color: black;
  cursor: pointer;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  transition-duration: 0.5s;
}

<ul class="navbar">
  <li id="dropbtn1" class="db"><a href="https://uklivesound.000webhostapp.com/aboutus.html">About Us</a></li>

  <!-- Use id for unique identifiers, Use classes for common traits
       This button is specifically dropbtn1, but it is styled like 
       all other drop buttons. -->
  <li id="dropbtn1" class="db">Rehearsals
    <ul class="dropdown-content hide" id="myDropdown1">
      <li><a href="https://uklivesound.000webhostapp.com/liveroom.html">Live Room</a></li>
      <li><a href="https://uklivesound.000webhostapp.com/isolationroom.html">Isolation Room</a></li>
    </ul>
  </li>

 <li id="dropbtn2" class="db">Recording
   <ul class="dropdown-content hide" id="myDropdown2">
     <li><a href="https://uklivesound.000webhostapp.com/audiorecording.html">Audio</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/videorecording.html">Video</a></li>
   </ul>
 </li>

 <li id="dropbtn3" class="db">For Hire
   <ul class="dropdown-content hide" id="myDropdown3">
     <li><a href="https://uklivesound.000webhostapp.com/hirepackages.html">Event Packages</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/largeevents.html">Large Events</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/equipmenthire.html">Equipment</a></li>
     <li><a href="https://uklivesound.000webhostapp.com/bandhire.html">Bands</a></li>
   </ul>
 </li>

 <li id="dropbtn4" class="db">Other Services
    <ul class="dropdown-content hide" id="myDropdown4">
      <li><a href="https://uklivesound.000webhostapp.com/buyandsell.html">Buy & Sell</a></li>
      <li><a href="https://uklivesound.000webhostapp.com/repairs.html">Repairs</a></li>
    </ul>
 </li>
        
 <li id="dropbtn6" class="db"><a href="https://uklivesound.000webhostapp.com/contact.html">Contact Us</a></li>
   </ul>