为什么我的下拉菜单只出现一半？

Question

我正在创建 google 网页的副本。我已完成所有操作，但应用程序图标的下拉菜单仅显示一半。我已经尝试增加高度等。我认为它在 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/

我使用您自己的 classes 创建了一个简单的 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; 
}

为什么我的下拉菜单只出现一半？

Why is my dropdown menu appearing only halfway?

html

javascript

css

frontend

drop-down-menu