CSS/Javascript 下拉菜单问题答案

【问题标题】：CSS/Javascript Dropdown Menu IssueCSS/Javascript 下拉菜单问题
【发布时间】：2017-05-23 14:04:30
【问题描述】：

大家好，我是网页设计的新手，我目前正在设计一个网站，我正在尝试使用使用 CSS 和 Javascript 制作的下拉菜单。我几乎设法让一切正常，但唯一需要解决的问题是下拉菜单内容出现在容器的左侧，而不是相关的父菜单选项下方。

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>

【问题讨论】：

你能编辑你的问题来清理你的代码吗？删除所有 > 换行符。然后在“code sn-p”中使用代码，这样我们就可以运行您拥有的内容并查看问题所在。
我很乐意提供帮助，但您的 HTML 几乎无法阅读。如果你能按照@ScottMarcus 的建议去做，那么也许可以清理
缩进，那就太好了！
很多重复。 myFunctionN() 到底在做什么？提供你的js代码
你的代码真的很乱。我假设你必须在 CSS 中给你的父母（dropdown-content1？）一个position:relative;
感谢一些非常可爱的人，它现在看起来可读了！

标签： javascript html css navbar dropdown

【解决方案1】：

您的帖子中有很多不必要的代码和代码重复。大部分都可以删除。您也没有正确设置 HTML 结构、类名和 id，以避免过多的代码或提供良好的语义。

菜单实际上只是一个美化的选择列表。因此，用于创建语义元素的最佳语义元素是 <ul> 元素，其中包含 <li> 元素。通过一点 CSS 样式，您可以删除项目符号并将垂直布局更改为水平布局。这通常是制作菜单的方式。

接下来，说到类和 id。为需要处理的元素提供唯一的id 属性，并将类分配给需要作为组的一部分进行样式设置的元素。这使得样式变得非常简单，并且消除了冗余的需要。

对于 JavaScript，不要使用内联 HTML 事件属性（onclick、onmouseover 等）。 Here is another post of mine 这解释了不使用这种古老的设置事件处理程序的许多原因。

所以，这里是您的菜单的修改版本。你会看到代码少了多少，理解起来也简单了。

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

【讨论】：

感谢大家提供的答案 - 我完全知道我有很多不必要的代码，我想我把它归结为纯粹的缺乏经验或者我以后很可能会想到的事情至少让它正常运行并放入所有内容！非常感谢！
我已经尝试过你的代码@Scott Marcus，我认为它更容易理解，点击功能似乎可以工作，但是使用该代码只会出现第一个菜单选项，如果你移动你的菜单就会消失将鼠标从我正在寻找的按钮上移开！
@JonBenham 是的，我故意添加了这一点，因为如果您离开按钮，让它保持打开状态并不是一个很好的用户体验。但是，如果您不想这样，只需删除 dd[i].addEventListener("mouseout", function(evt){ hideElement(evt.target); }); 和整个 hideElement 函数。
我明白了，即使您将鼠标悬停在下拉菜单本身上，菜单也会消失，如果您离开按钮而不是离开按钮或下拉菜单，它似乎会隐藏？
@JonBenham 下拉菜单是下拉按钮的子内容。将鼠标移出任何一个都会导致菜单关闭。

【解决方案2】：

您需要使用类名下拉列表为列表项提供相对位置。

这不是对您自己的代码的编辑，但这里有一个示例，说明父子之间的关系应如何与 CSS 中的下拉菜单一起使用：

.dropdown-container {
  position: relative;
}

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

Relevant JSFiddle

【讨论】：

所以在我的情况下，您的意思是 .navbar （容器）是相对的，然后 .dropdown-content 1-4 是绝对的？我已经设法让它们水平显示在一条线上，但顶部和底部并没有调整垂直位置，所以它们只是覆盖了父按钮......我不禁觉得我错过了一些非常简单的东西！？

【解决方案3】：

CSS 类 dropdown 的宽度设置为 100%，这意味着包含在此父级中的所有 .dropdown-content1 元素将具有完全相同的宽度，从完全相同的点开始。这就解释了为什么您会看到下拉菜单向左移动。

将您的 .dropdown 类更改为以下内容：

.dropdown {
    float: left;
}

您会注意到的第一件事是，您的所有按钮都会变得有点滑稽。

这是因为内部 CSS 类 dropbtn1 和 dropbtn2 等将它们的 width 设置为 16.667%。将这些宽度设置为100%，您将开始看到下拉菜单的行为更加“符合预期”。

【讨论】：

【解决方案4】：

您需要将 16% 宽度的元素更改为 .dropdown 父类。然后将每个下拉内容类设置为父级的 100%。您还需要将父下拉类设置为 position: relative 并将子内容类设置为 position: absolute 然后告诉浏览器将下拉列表放在父级中的哪个位置（从父级向下顶部 50px 等）。

这是一个适合我的重写...

编辑：您在“关于”和“联系我们”href 链接符号中有一个错误，省略了引号。我还进一步简化了您的 Javascript 和 CSS，结合了许多元素和类，因此您可以看到这是如何完成的。它没有尽可能简化，但我相信你明白了，所以我将进一步完善你。

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

【讨论】：

这是最好的答案，因为它包括其他答案并且对我来说也很完美。
作为最佳实践，我想补充一点，您的许多定义都可以合并。特别是myFunction[n]() 是同一个函数四次，可以合并。此外，最好将您的侦听器事件实现为：window.addEventListener("click", functionReference)。有人在对原始问题的评论中提到了这一点，但我想确保在答案下也提到了这一点。
您实际上可以消除所有额外的下拉内容 CSS 类定义，因为它们都是相同的。只需为所有下拉菜单创建类“下拉内容”。消除1-4
我还认为您可能会将您的 .dropbtn[x] CSS 类设置为一个没有颜色定义的类，然后只需在 HTML 中使用 style="//color here" 明确设置颜色即可。我不知道这是否是技术上的最佳实践，但它肯定会显着减少 CSS 的长度......