Why dropdown menu doesn't shows/shows under background? bootstrap/html/css - html

Question

I'm trying to make a navbar with a dropdown menu on the right but when I press the menu it doesn't show up. After commenting out all the css styles, the button works.
.info {
margin-top: 15%;
display: table;
height: 100%;
width: 100%;
}
#navbar {
background: red;
position: fixed;
top: 0px;
width: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 12px;
}
h1 {
color: rgb(255, 255, 255);
border: 3px solid #fff;
text-align: center;
background: rgba(0, 0, 0, 0.1);
font-size: 40px;
font-weight: normal;
padding: 30px;
margin: 15px;
display: inline-block;
background: rgba(0, 0, 0, 0.4);
}
/* Menu */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(87, 41, 41);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
.conc {
float: right;
}
html,
body {
height: 100%;
}
body {
background: url(../img/main_learn.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
input[type=range] {
margin: 10px;
width: 50px;
}
<div id="navbar">
<ul>
<li>Strona główna</li>
<li>Aktualności</li>
<li>Instrumenty</li>
<li>Musicale</li>
<li>Nauka</li>
<li>Charty</li>
<li>Filmy</li>
<li>Chaos</li>
<li class="conc">
<div class="dropdown show">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- <b>Kontakt</b> -->
</li>
</ul>
</div>
I have tried commenting out single styles overflow: hidden etc. Dropdown button is an example from bootstrap documentation. Popper.js is added.

Answer 1

To create a navbar with a dropdown menu on the right:
The CSS + The HTML
body {
min-height: 100vh;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.container {
float:left;
clear: left;
}
<div id="wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#" cursorshover="true">Title</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="#" cursorshover="true">Home
<span class="visually-hidden">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'play' %}" cursorshover="true">Play</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'chat' %}" cursorshover="true">Chat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}" cursorshover="true">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" cursorshover="true">Account</a>
<div class="dropdown-menu" data-bs-popper="static">
<a class="dropdown-item" href="{% url 'profile' %}" cursorshover="true">My Profile</a>
<a class="dropdown-item" href="{% url 'settings' %}" cursorshover="true">Settings</a>
<a class="dropdown-item" href="{% url 'scores' %}" cursorshover="true">Scores</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout_user' %}" cursorshover="true" >Log Out</a>
</div>
</ul>
<form class="d-flex">
<input class="form-control me-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit" cursorshover="true">Search</button>
</form>
</div>
</div>
</nav>

Answer 2

I solved the problem just add style
.dropdown {
position: top;
}
and remove
/* overflow: hidden; */
from ul styling