HTML DropDown button content stuck inside navbar - html

Question

I'm new to HTML/CSS and I'm trying to add a dropdown button to my nav bar, currently the the dropdown content is appearing under the button(as intended) however it is stuck inside the nav bar and will not overlay below.
I would like the text in my navbar to remain central and the dropdown content to be visible below the button but also overlay outside of the navbar.
What do i need to change in order for this to be possible?
I have tried adding a z-index to elements to no avail and i have also played around with positioning of all the elements.
body {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
width: 100%;
position: none;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 100%;
right: 0;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<nav class="navbar">
Home
Popular Items
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Products
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Contact Us
FAQ
</nav>

Answer 1

The problem is not in the z-index value, the thing is that in the container .navbar you set the overflow to hidden, so whenever the elements that are inside this container go beyond the limits of your container, this elements will be effectively hidden. Only by removing the property overflow: hidden; in the .navbar definition class your hover effect will work.
body {
text-align: center;
}
.navbar {
background-color: #333;
width: 100%;
position: none;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 100%;
right: 0;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<nav class="navbar">
Home
Popular Items
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Products</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Contact Us
FAQ
</nav>

Answer 2

You code had a few problems. The value hidden in the overflow property hid your dropdown menu when it's height exceeded that of the dropdown class. Also you need to specify a top value that pushes the dropdown-content right beneath the dropbtn button. And to center the dropdown menu horizontally you need to add a right and left value of 0. I've changed your CSS code a little bit. Hope this solves your issue.
body {
text-align: center;
}
.navbar {
/* overflow: hidden; */
background-color: #333;
width: 100%;
position: none;
height: 60px;
}
.navbar a {
font-size: 22px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
position: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
color: pink;
}
.dropdown {
display: inline;
overflow: hidden;
position: relative;
}
.dropdown .dropbtn {
font-size: 22px;
cursor: pointer;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
text-align: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 40px;
right: 0;
left: 0;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}

Answer 3

Just remove Overflow: hidden in .navbar
or add this:
.navbar {
overflow: visible !important;
}