Issue with dropdown in navbar - Bootstrap - html

Question

Do you guys know why my dropdown in navbar is like this? I'm using the bootstrap framework for my css.
Image of issue
The css for the dropdown is as followed:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem; }
Here is the html for the header:
<header>
<div class="container" style="height: 80px;">
<div class="logo">
<img src="assets/img/logo.png" style="max-width: 130px;" alt=""/>
</div>
<div class="menu">
<ul>
<li>Hem</li>
<li>Projekt <i class="fas fa-arrow-down"></i>
<div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
<!--<a class="dropdown-item" href="#">Ungdomligt Engagemang</a>-->
</div>
</li>
<li>Om oss</li>
<li>Bli medlem</li>
<li>Sociala Medier <i class="fas fa-arrow-down"></i>
<div class="dropdown-menu bg-dark" aria-labelledby="socmeddropdown">
<a class="dropdown-item" href="https://www.instagram.com/samhallets.unga/" target="_blank">Instagram</a>
<a class="dropdown-item" href="https://discord.gg/pkJMK3hVa5" target="_blank">Discord</a>
</div>
<li>Kontakta oss</li>
<li>Ung Medlem</li>
</ul>
</div>
<div class="mobile-menu"><i class="fa fa-bars"></i></div>
</div>
</header>
Here is the css for the dropdown-item class:
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0; }

Answer 1

Check the position attribute of the dropdown i.e., the element within which dropdown must be present should have position: relative and your dropdown list position: absolute.
Could you please add some code with your question to get more helpful answers
Edit: Checked your site
Just remove the overflow: hidden on <header> tag
header {
overflow: unset; // change here
display: block;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 99;
padding: 40px 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}