样式下拉菜单

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上找到新方法，并获得一些提示： 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>