如何使我的下拉菜單顯示/對齊

Question

所以我正在制作一個簡單的網頁，但是我無法正常使用下拉菜單。 在這一點上，它甚至不再出現，並且當它出現時是水平線而不是垂直線。

因為它不顯示下拉列表。 我想念什么？ 我還有多余的東西嗎？

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var d = 0; d < dropdowns.length; d++) { var openDropdown = dropdowns[d]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

  ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .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-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;} 

  <nav> <ul> <li><a href='front.html'>Home</a></li> <li><a href='intro.html'>Intro</a></li> <li><a href='how.html'>How it Works</a></li> <li><a href='best.html'>Using it</a></li> <li class ="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Examples</a> <ul class="dropdown-content" id="myDropdown"> <div class="dropdown-content" id="myDropdown"> <li><a href='saga.html'>SAGA</a></li> <li><a href='portfolio.html'>Portfolio Optimization</a></li> <li><a href='circuits.html'>Evolved Circuits</a></li> </div> </ul> </li> <li><a href='about.html'>References</a></li> </ul> </nav> 

Answer 1

除了要查找的所需樣式外，似乎您在ul中還有一個不需要的包裝器<div class="dropdown-content" id="myDropdown">在ul <div class="dropdown-content" id="myDropdown">列表保持display: none 。 刪除它效果很好。

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var d = 0; d < dropdowns.length; d++) { var openDropdown = dropdowns[d]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .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-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;} 

 <nav> <ul> <li><a href='front.html'>Home</a></li> <li><a href='intro.html'>Intro</a></li> <li><a href='how.html'>How it Works</a></li> <li><a href='best.html'>Using it</a></li> <li class ="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Examples</a> <ul class="dropdown-content" id="myDropdown"> <li><a href='saga.html'>SAGA</a></li> <li><a href='portfolio.html'>Portfolio Optimization</a></li> <li><a href='circuits.html'>Evolved Circuits</a></li> </ul> </li> <li><a href='about.html'>References</a></li> </ul> </nav> 

Answer 2

我只是刪除了ul標簽中的div，並覆蓋了li標簽樣式的下拉菜單（刪除了float：這是li標簽的左側）

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var d = 0; d < dropdowns.length; d++) { var openDropdown = dropdowns[d]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

  ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } .dropdown-content li { float: none !important; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .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-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;} 

  <nav> <ul> <li><a href='front.html'>Home</a></li> <li><a href='intro.html'>Intro</a></li> <li><a href='how.html'>How it Works</a></li> <li><a href='best.html'>Using it</a></li> <li class ="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Examples</a> <ul class="dropdown-content" id="myDropdown"> <li><a href='saga.html'>SAGA</a></li> <li><a href='portfolio.html'>Portfolio Optimization</a></li> <li><a href='circuits.html'>Evolved Circuits</a></li> </div> </ul> </li> <li><a href='about.html'>References</a></li> </ul> </nav> 

Answer 3

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var d = 0; d < dropdowns.length; d++) { var openDropdown = dropdowns[d]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content li{ float: none; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .show { display:block; } 

 <nav> <ul> <li><a href='front.html'>Home</a></li> <li><a href='intro.html'>Intro</a></li> <li><a href='how.html'>How it Works</a></li> <li><a href='best.html'>Using it</a></li> <li class ="dropdown"> <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Examples</a> <ul class="dropdown-content" id="myDropdown"> <li><a href='saga.html'>SAGA</a></li> <li><a href='portfolio.html'>Portfolio Optimization</a></li> <li><a href='circuits.html'>Evolved Circuits</a></li> </ul> </li> <li><a href='about.html'>References</a></li> </ul> </nav> 

您應該添加position: fixed; 對於.dropdown-content類， .dropdown-content li應該具有float: none; 獲得下拉式原始效果。