Pure CSS Sticky Horizontal Subnav - dropdown not displaying - html

Question

I am trying to create a horizontal subnavigation bar in CSS (without an unordered list), but I can't get the dropdown menu to appear.
Here's my code in HTML:
<div class="navbar sticky">
Home
<div class="subnav">
<button class="subnavbtn">Learn <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Print
Review
Examples
More Info
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Game <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Play Now!
How to Play
Cards
</div>
</div>
Minigames
</div>
Here's my code in CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.navbar {
overflow: hidden;
background-color: green;
position: sticky;
top: 0;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: chartreuse;
color: black;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
visibility: hidden;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
visibility: visible;
display: block;
}
I've tried changing the opacity or even using visibility, but it just won't work for me. Sometimes the drop down will appear, however the top nav bar will transform (the "Game" link will shift right, starting at the point where "More Info" ends even though they are on different bars).
Most solutions I've seen while searching this issue is that they are not using (display: block;), but I have been and I don't know what to do at this point.
Here's fiddle

Answer 1

Remove overflow:hidden; from your .navbar declaration and replace it with float:left; and width:100%;
Floated elements are removed from the calculated height of the parent element. However, overflow:hidden; invokes the height to be calculated via block formatting context but, was hiding your dropdowns cause overflow is hidden.
Also, floating the parent element means the children dictate the parent's height making it more dynamic.
Revised Fiddle Here

Answer 2

Just remove the position property from the div with class name navbar.
.navbar {
overflow: hidden;
background-color: green;
top: 0;
}

Answer 3

Dropdown menu appear out of the navbar.
So, you should replace overflow: hidden with height: 50px in .navbar:
.navbar {
height: 50px;
background-color: green;
position: sticky;
top: 0;
}