CSS/Javascript下拉菜单问题

大家好，我对网页设计相当陌生，我目前正在设计一个网站，我尝试使用CSS和Javascript制作的下拉菜单。我几乎成功地使一切正常工作，但唯一需要解决的问题是，下拉菜单内容显示在容器的左侧，而不是相关父菜单选项的下方

函数myFunction1（）{
document.getElementById（“myDropdown1”）.classList.toggle（“show”）；
}
函数myFunction2（）{
document.getElementById（“myDropdown2”）.classList.toggle（“show”）；
}
函数myFunction3（）{
document.getElementById（“myDropdown3”）.classList.toggle（“show”）；
}
函数myFunction4（）{
document.getElementById（“myDropdown4”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“dropdown-content1”）；
var i；
对于（i=0；i

.navbar{
浮动：左；
字体系列：Impact、Haettenschweiler、Franklin哥特式粗体、Arial黑色、“无衬线”；
高度：自动；
宽度：100%；
显示：内联块；
保证金：0；
填充：0；
位置：相对位置；
}
纳瓦尔先生{
字号：2em；
字号：100；
颜色：白色；
文本对齐：居中；
}
.下拉列表{
宽度：100%；
}
.下拉列表内容1{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
宽度：16.667%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
填充：0px；
高度：自动；
}
.下拉列表-1 a{
文字装饰：无；
显示：块；
宽度：100%；
填充：0px；
背景色：#000000；
边框：1px纯白；
文本对齐：居中；
高度：自动；
}
.下拉列表内容1 a:悬停{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
宽度：100%；
填充：0px；
背景色：#FFFFFF；
边框：1px纯黑；
字体系列：Impact、Haettenschweiler、Franklin哥特式粗体、Arial黑色、“无衬线”；
文本对齐：居中；
高度：自动；
过渡时间：0.5s；
长方体阴影：0px 8px 16px 0px rgba（0,0,0,0.2）
}
.下拉列表2{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
宽度：16.667%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
填充：0px；
}
.下拉列表内容2 a{
颜色：白色；
文字装饰：无；
显示：块；
宽度：100%；
填充：0px；
背景色：#000000；
边框：1px纯白；
字体系列：Impact、Haettenschweiler、Franklin哥特式粗体、Arial黑色、“无衬线”；
文本对齐：居中；
高度：自动；
字号：2em；
}
.下拉列表内容2 a:悬停{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
宽度：100%；
填充：0px；
背景色：#FFFFFF；
边框：1px纯黑；
字体系列：Impact、Haettenschweiler、Franklin哥特式粗体、Arial黑色、“无衬线”；
文本对齐：居中；
高度：自动；
过渡时间：0.5s；
长方体阴影：0px 8px 16px 0px rgba（0,0,0,0.2）
}
.下拉列表3{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
宽度：16.667%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
填充：0px；
}
.下拉列表-3 a{
颜色：白色；
文字装饰：无；
显示：块；
宽度：100%；
填充：0px；
背景色：#000000；
边框：1px纯白；
字体系列：Impact、Haettenschweiler、Franklin哥特式粗体、Arial黑色、“无衬线”；
文本对齐：居中；
高度：自动；
字号：2em；
}
.下拉列表内容3 a:悬停{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
宽度：100%；
填充：0px；
背景色：#FFFFFF；
边框：1px纯黑；
字体系列：Impact、Haettenschweiler、Franklin哥特式粗体、Arial黑色、“无衬线”；
文本对齐：居中；
高度：自动；
过渡时间：0.5s；
长方体阴影：0px 8px 16px 0px rgba（0,0,0,0.2）
}
.下拉列表内容4{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
宽度：16.667%；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
填充：0px；
}
.下拉列表4 a{
颜色：白色；
文字装饰：无；
显示：块；
宽度：100%；
填充：0px；
背景色：#000000；
边框：1px纯白；
字体系列：Impact、Haettenschweiler、Franklin哥特式粗体、Arial黑色、“无衬线”；
文本对齐：居中；
高度：自动；
字号：2em；
}
.下拉列表内容4 a:悬停{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
宽度：100%；
填充：0px；
背景色：#FFFFFF；
边框：1px纯黑；
字体系列：影响，
.dropdown-container {
  position: relative;
}

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

.dropdown {
    float: left;
}

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();
    }
}

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

.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;
   }