样式下拉菜单

Question

我是css html和js的新手。 我的问题是下拉菜单就像窗外一半，我不知道如何定位下拉菜单。我试过的所有方法都不起作用。我的下拉列表中的第二个问题是，只有单击按钮的某个部分，才会显示下拉菜单。你能帮助我吗？ 这是我的代码：

window.onclick = function(event) {
  if (!event.target.matches('.dropdiv')) {
    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');
      }
    }
  }
}

.dropdiv {
  background-color: #001155;
  width: 40px;
  height: 22px;
}
.dropdivs {
  height: 4px;
  width: 29px;
  background-color: white;
  color: white;
  border: #001155;
  border-radius: 5px;
  margin: 2px;
}
/* Dropdown Button */

.dropbutton {
  background-color: #001155;
  color: white;
  padding: 13px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Dropdown Links*/

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.show {
  display: block;
}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbutton">
    <div class="dropdiv">
      <div class="dropdivs"></div>
      <div class="dropdivs"></div>
      <div class="dropdivs"></div>
    </div>
  </button>
  <div id="inhalt" class="dropdown-content">
    <a href="https://www.google.ch/">Google</a>
    <a href="https://intranet.swisscom.com/home/#/">Intranet</a>
    <a href="https://www.facebook.com/">Facebook</a>
  </div>
</div>

Answer 1

以下是答案，但对我而言，创建“下拉菜单”不是一个好方法，我确信您会在Google上找到新方法，并提供一些提示：Responsive Top Navigation来自 w3schools.com

window.onclick = function(event) {
  if (!event.target.matches('.dropdiv')) {
    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');
      else
        openDropdown.classList.add('show');
    }
  }
}

.dropdiv {
  background-color: #001155;
  width: 40px;
  height: 22px;
}
.dropdivs {
  height: 4px;
  width: 29px;
  background-color: white;
  color: white;
  border: #001155;
  border-radius: 5px;
  margin: 2px;
}
/* Dropdown Button */

.dropbutton {
  background-color: #001155;
  color: white;
  padding: 13px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  right:0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Dropdown Links*/

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown-content.show {
  display: block;
}

<div class="dropdown">
  <button class="dropbutton">
    <div class="dropdiv">
      <div class="dropdivs"></div>
      <div class="dropdivs"></div>
      <div class="dropdivs"></div>
    </div>
  </button>
  <div id="inhalt" class="dropdown-content">
    <a href="https://www.google.ch/">Google</a>
    <a href="https://intranet.swisscom.com/home/#/">Intranet</a>
    <a href="https://www.facebook.com/">Facebook</a>
  </div>
</div>