為什么我的下拉菜單只顯示了一半？

Question

我正在創建谷歌網頁的副本。 我已經完成了一切，但我的應用程序圖標下拉菜單只顯示了一半。 我已經嘗試過增加高度等。我認為它在 header 部分之后沒有顯示。 請提出我可能犯的任何可能的錯誤。

CSS

<style>
.menu-btn 
{background-color:#f5f5f5 ;
 color: black;
 font-family: sans-serif;
 border: none;}

.dropdown-menu {
   position: relative;
   display: inline-block;
   position: relative;
   display: inline-block;
   border:1% solid #3c4043;}

.menu-content {
   display: none;
   position: absolute;
   background-color: #f5f5f5;
   min-width: 160px;
   box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
   right: 0;
   align-items:center;
   border-radius: 3%;
   border:1% solid #black;
   width:300px;
   height: 500px;
   cursor: pointer;}
</style>

**<javascript>**

<script>
let dropdownBtn = document.querySelector('.menu-btn');
let menuContent = document.querySelector('.menu-content');
dropdownBtn.addEventListener('click',()=>{
   if(menuContent.style.display===""){
      menuContent.style.display="block";}
 else {
      menuContent.style.display="";}
})
</script>

Answer 1

你有一個額外的：在你的菜單內容 class 的高度。

CSS 中還有一些其他錯誤。 我創建了一個 jsfiddle，它可以幫助您找出您自己的代碼有什么問題。

https://jsfiddle.net/6ck7rq53/6/

我使用您自己的類創建了一個簡單的 HTML 下拉列表：

<html>
  <body>
    <div class="dropdown-menu">
      <button class="menu-btn">Dropdown
        <div class="menu-content">
            <p>One</p>
            <p>Two</p>
            <p>Three</p>
        </div>
      </button>
    </div>
  </body>
</html>

我修復了您的 CSS 錯誤：

.menu-btn {
 background-color: #f5f5f5;
 color: black;
 font-family: sans-serif;
 border: none;
 }

.dropdown-menu {
  position: relative;
  display: inline-block;
  border: 1px solid #3c4043;
  height: auto;
}

.menu-content {
   display: none;
   position: absolute;
   background-color: #f5f5f5;
   min-width: 160px;
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
   right: 0;
   align-items: center;
   border-radius: 3%;
   border: 1px solid black;
   width: 300px;
   height: 500px;
   cursor: pointer;
   left: 0; 
}

為什么我的下拉菜單只顯示了一半？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-12-13 18:58:37

為什么我的下拉菜單只顯示了一半？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-12-13 18:58:37

解決方案1
0 已采納 2020-12-13 18:58:37