帶有下拉菜單的響應式導航欄不起作用

Question

我正在創建一個響應式導航欄，其中有一個下拉菜單。 下面是我的代碼：

我有用於測試目的的內聯 CSS 代碼和媒體查詢。 所以它可能看起來很長。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="../../themes/bootstrap/starterkits/THEMENAME/css/style.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css" />
<style type="text/css">body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #ffffff;
}

.home {
  float: left;
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}



.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: #D5DBDB;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
<div class="panel">
<div class="topnav" id="myTopnav">
<div class="home"><a href="#"><img src="../../sites/default/files/logo_0.png" /></a></div>

<div class="dropdown">
<div class="dropbtn"><a href="#">Programs</a></div>

<div class="dropdown-content"><a href="#">Success</a></div>
</div>
<a href="#">Contact</a> 
<a href="#">Families</a> 
<a href="#">About</a> 
<a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">☰</a></div>
</div>
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

菜單左側包含 Home 徽標圖像，右側包含 4 個菜單項。

在活動的“主頁”鏈接之后是“程序”下拉按鈕，其下方應該有一個“成功”下拉菜單。 此下拉列表未正確加載並且設計失真。 任何幫助解決這個問題？

Answer 1

我建議不要使用浮動進行布局。 Flexbox 對此要好得多，並且如今在瀏覽器中得到了廣泛支持。

浮動正在破壞您的 html 元素的流動。

此外，.dropbtn 上有一個填充，這使得項目不對齊。

 body { margin:0; font-family:Arial } .topnav { display: flex; justify-content: flex-end; overflow: hidden; background-color: #ffffff; } .home { margin-right: auto; } .topnav a { display: block; color: #000000; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } .dropdown { overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; background-color: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #ffffff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: #D5DBDB; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } }

 <!doctype html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="../../themes/bootstrap/starterkits/THEMENAME/css/style.css" rel="stylesheet" /> <link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css" /> </head> <body> <div class="panel"> <div class="topnav" id="myTopnav"> <div class="home"> <a href="#"> <img src="../../sites/default/files/logo_0.png" /> </a> </div> <a href="#">About</a> <a href="#">Families</a> <a href="#">Contact</a> <div class="dropdown"> <div class="dropbtn"> <a href="#">Programs</a> </div> <div class="dropdown-content"> <a href="#">Success</a> </div> </div> <a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">☰</a> </div> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>

Answer 2

你不需要你的下拉按鈕是一個div標簽，它應該是一個button標簽。

所以改變

<div class="dropbtn"><a href="#">Programs</a></div>

到

<button class="dropbtn"><a style="padding: 0px" href="#">Programs</a></button>

這應該正確加載下拉列表並與導航欄中的其他項目一致。 希望這可以幫助您在不更改大部分原始代碼的情況下走上正確的軌道。

 .topnav { overflow: hidden; background-color: #ffffff; } .home { float: left; overflow: hidden; } .topnav a { float: right; display: block; color: #000000; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } .dropdown { float: right; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #ffffff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: #D5DBDB; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="../../themes/bootstrap/starterkits/THEMENAME/css/style.css" rel="stylesheet" /> <link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css" /> <style type="text/css">body {margin:0;font-family:Arial} </style> <div class="panel"> <div class="topnav" id="myTopnav"> <div class="home"><a href="#"><img src="../../sites/default/files/logo_0.png" /></a></div> <div class="dropdown"> <button class="dropbtn"><a style="padding: 0px" href="#">Programs</a></button> <div class="dropdown-content"><a href="#">Success</a></div> </div> <a href="#">Contact</a> <a href="#">Families</a> <a href="#">About</a> <a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">☰</a></div> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script>