CSS Dropdown in Navbar doesn't work - Dropdown appears in navbar - html

Question

I have an navbar with centered li items. Two of this li items should have an dropdown while hovering over them. I tried this but the dropdown-content appears in the navbar container.
I tried this with the .dropdown and while hovering over it, the .dropdwon-content should be visible under the red border of the navbar.
My Code:
function resNavBar() {
var x = document.getElementById("idTopNav");
var y = document.getElementById("idHomeBtn");
var z = document.getElementById("idIconClose");
var zz = document.getElementById("idIconMenu");
if (x.className === "topnav" & y.className === "homebtn") {
x.className += " responsive";
y.className += " responsive";
z.className = "icon-close";
zz.className += " invisible";
} else {
x.className = "topnav";
y.className = "homebtn";
z.className += " invisible";
zz.className = "icon-menu";
}
}
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
height: 100%;
}
html {
height: 100%;
}
body * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
header .topnav {
background-color: #201D1D;
overflow: hidden;
border-bottom: 4px solid #A90101;
}
header .topnav li {
list-style: none;
list-style-type: none;
}
header .topnav li a {
color: #fff;
display: block;
text-align: center;
float: left;
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
text-decoration: none;
padding: 0.5em 1.2em;
}
header .topnav li a:hover {
background-color: #A90101;
color: #201D1D;
}
header .topnav .icon-home {
display: none;
font-size: 1.5rem;
padding: 0.5em 1em;
color: #fff;
}
header .topnav .topnav a.icon-menu,
header .topnav .topnav a.icon-close {
display: none;
}
header .topnav .dropdown {
position: relative;
display: inline-block;
}
header .topnav .dropdown .dropdown-content {
display: none;
position: absolute;
background-color: #f8f9fa;
min-width: 10vw;
z-index: 1;
padding: 12px 16px;
}
header .topnav .dropdown:hover .dropdown-content {
display: block;
}
// Responsive:
#media screen and (max-width: 1000px) {
.topnav ul li a {
display: none;
}
.topnav a.icon-home {
float: left;
display: block;
}
.topnav a.icon-menu {
float: right;
display: block;
font-size: 1.5rem;
padding: 0.5em 1em;
color: #fff;
}
.topnav a.icon-close {
float: right;
display: block;
font-size: 1.6rem;
padding: 0.5em 1em;
color: #fff;
}
}
#media screen and (max-width: 1000px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon-home {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a.icon-menu {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a.icon-close {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.homebtn.responsive {
display: none;
}
.topnav a.icon-close.invisible {
display: none;
}
.topnav a.icon-menu.invisible {
display: none;
}
}
#media screen and (min-width: 1000px) {
.topnav-mid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.topnav a.icon-close {
display: none;
}
.topnav a.icon-menu {
display: none;
}
}
<!---HTML:--->
<header>
<nav class="topnav">
<div class="homebtn" id="idHomeBtn">
<a href="index.html" class="icon-home" onclick="none">
<i class="fas fa-home"></i>
</a>
</div>
<ul class="topnav-mid">
<li>link</li>
<li>link</li>
<li>link</li>
<li class="dropdown">link
<!--! DROPDOWN -->
<div class="dropdown-content dropdown-content-about">
link
<li>link</li>
</ul>
<a href="javascript:void(0);" class="icon-close invisible" id="idIconClose" onclick="resNavBar()">
<i class="fas fa-times"></i>
</a>
<a href="javascript:void(0);" class="icon-menu" id="idIconMenu" onclick="resNavBar()">
<i class="fas fa-bars"></i>
</a>
</nav>
</header>
<script src="js/responsive.js"></script>
Has anyone an idea why the dropdown is in the navbar?

Answer 1

The dropdown is in the navbar because you don't give it a position. Just add a top attribute to the .dropdown-content.
header .topnav .dropdown .dropdown-content {
display: none;
position: absolute;
background-color: #f8f9fa;
min-width: 10vw;
z-index: 1;
padding: 12px 16px;
top: 100%;
}
And you need to get rid of the overflow on your .topnav element.