Why is my dropdown menu appearing only halfway?
Question
I was creating a replica of google webpage. I have everything finished but my dropdown menu for the apps icon only shows up halfway. I've already tried increasing the height etc. I think its not showing after the header portion. Please suggest any possible blunders I may have committed.
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>
1 answers
solution1
0 ACCPTED 2020-12-13 18:58:37
You have an extra: in the height for your menu-content class.
There are also a few other bugs in the CSS. I created a jsfiddle that might help you figure out what's wrong with your own code.
https://jsfiddle.net/6ck7rq53/6/
I created a simple HTML dropdown using your own classes:
<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>
and I fixed your CSS bugs:
.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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.