Dropdown in navbar not showing list of elements(Angular 6) - html

Question

I write navbar component in my Angular 6 app.
<div class="navbar">
<ul>
<li>tekst</li>
<li>tekst</li>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</ul>
</div>
and .css file:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e8d625;
position: fixed;
top: 0;
width: 100%
}
li {
float: left;
}
li a {
display: block;
color: #090909;
text-align: center;
font-weight: bold;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #f7e525;
}
.active {
background-color: #f7e525;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #77ffb7;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #f7e525;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #80f987;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #80f987;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
but it's not working.
When I use the mouse, dropdown does not display anything.. It's difficult to say but I use https://www.w3schools.com/css/css_dropdowns.asp .
Do not I have any libraries?
And other question. Will I be able to use in dropdown later? Beacuse I use RoutingModule.
Very thanks for all answers.
EDIT:
add left navbar
<ul>
<li>Calendar</li>
<li>info1</li>
<li>info2</li>
<li>info3</li>
<li>info4</li>
</ul>
ul {
list-style-type: none;
margin-top: 45px;
padding: 0;
width: 200px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}

Answer 1

You need to remove the overflow: hidden rule from ul, otherwise the dropdown won't be visible.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #e8d625;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
li {
float: left;
}
li a {
display: block;
color: #090909;
text-align: center;
font-weight: bold;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #f7e525;
}
.active {
background-color: #f7e525;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #77ffb7;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #f7e525;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #80f987;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #80f987;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
ul.side {
list-style-type: none;
margin-top: 45px;
padding: 0;
width: 200px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
z-index: 1;
}
.side li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
.side li a:hover {
background-color: #555;
color: white;
}
<div class="navbar">
<ul>
<li>tekst</li>
<li>tekst</li>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</ul>
</div>
<ul class="side">
<li>Calendar</li>
<li>info1</li>
<li>info2</li>
<li>info3</li>
<li>info4</li>
</ul>