样式下拉菜单

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

这就是答案，但对我来说不是一个很好的方式来创建一个下拉菜单，我相信你会在谷歌上找到新的方法，并为一些提示:响应式顶部导航从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>