Dropdown in Flex Navbar pushes content - html

Question

I'm trying to add a dropdown to a Navbar, however, when hovering on the dropdown button (Kieli, in my case), center alignment pushes the rest of the items out of the way. I have attached a snippet with an example of my problem.
.Navbar {
display: flex;
height: 10vh;
background-color: lightgray;
justify-content: space-between;
align-items: center;
}
.Navbar-menu {
display: flex;
}
.Navbar-dropdown {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
}
.Navbar-dropdownMenu {
display: none;
}
.Navbar-dropdown:hover .Navbar-dropdownMenu {
display: flex;
flex-direction: column;
}
<nav class="Navbar">
<a class="Navbar-brand Navbar-link" href="./">Brand</a>
<div class="Navbar-menu">
<a class="Navbar-link Text-uppercase" href="./">Link 1</a>
<a class="Navbar-link Text-uppercase" href="./">Link 2</a>
<div class="Navbar-dropdown">
<button class="Navbar-dropdownBtn">Kieli</button>
<div class="Navbar-dropdownMenu">
<a class="Navbar-link" href="../en-fi/">Suomi</a>
<a class="Navbar-link" href="../en-gb/">Englanti</a>
</div>
</div>
</div>
</nav>

Answer 1

The content is pushed because your dropdown menu is in your Navbar-dropdown. On hover you're displaying the dropdown content and as it takes vertical space it pushes the content.
To avoid that, you have to set the dropdown content position to absolute.
Don't forget to set the position of the Navbar-dropdown to relative.
.Navbar {
display: flex;
height: 10vh;
background-color: lightgray;
justify-content: space-between;
align-items: center;
}
.Navbar-menu {
display: flex;
}
.Navbar-dropdown {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
position: relative;
border: 1px solid red;
}
.Navbar-dropdownMenu {
background-color: lightgray;
display: none;
position: absolute;
top: 20px;
right: 0;
}
.Navbar-dropdown:hover .Navbar-dropdownMenu {
display: flex;
flex-direction: column;
}
<nav class="Navbar">
<a class="Navbar-brand Navbar-link" href="./">Brand</a>
<div class="Navbar-menu">
<a class="Navbar-link Text-uppercase" href="./">Link 1</a>
<a class="Navbar-link Text-uppercase" href="./">Link 2</a>
<div class="Navbar-dropdown">
<button class="Navbar-dropdownBtn">Kieli</button>
<div class="Navbar-dropdownMenu">
<a class="Navbar-link" href="../en-fi/">Suomi</a>
<a class="Navbar-link" href="../en-gb/">Englanti</a>
</div>
</div>
</div>
</nav>