我正在创建谷歌网页的副本。我已完成所有操作，但应用程序图标的下拉菜单仅显示一半。我已经尝试过增加高度等。我认为它没有显示在标题部分之后。请提出我可能犯下的任何可能的错误。
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 = "";
}
}).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;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="dropdown-menu">
<button class="menu-btn"><i class="fa fa-bars"></i></button>
<div class="menu-content">
<div class="row">
<div class="column">
</div>
</div>
</div>
</div>您的菜单内容类的高度有一个额外的 : 。
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;
}