Html/CSS - Nav bar submenu doesn't Overlap the content below - css

Question

I need some help with a problem that I think some css can resolve.
I have this nav bar (click in the link), and when I pass the mouse over it and the submenu appear, the content of the nav mix with the content below. Take a look:
enter image description here
I surrounded the local of the problem with red lines.
The correct nav needs to be like this other image:
enter image description here
Realize that the submenu content overlap the textbox below, and it's correct.
My html code is:
<div class="row">
<div class="containerMenu" *ngIf="usuario !== undefined" >
<nav>
<ul class="wrapper" >
<li class="dropdown" *ngFor="let menu of usuario.menus">
{{menu.nmMenu}}
<div class="dropdown-list">
<a routerLink="{{sub.path}}" *ngFor="let sub of menu.subMenus">{{sub.nmMenu}}</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
And my atual CSS :
nav{
text-align: left;
/* background-color:black; */
margin:0 auto;
}
nav ul{
margin:0;
padding:0;
text-align: center;
list-style-type: none;
display: inline-block;
}
nav ul li{
float:left;
min-height:18px;
font-size:12px !important;
display:table-cell;
font-weight:bold;
}
nav a{
display: inline-block;
padding:8px 17px;
color:#fff;
text-decoration: none;
}
.dropdown{
position: relative;
display: inline;
}
.dropdown-list{
display: none;
position: absolute;
background-color:white;
min-width: 180px;
}
.dropdown-list a{
/* color:black; */
text-decoration: none;
display: block;
color:black;
}
.dropdown-list a:hover {
background-color: #F5F5F5;
color:black;
position: absolute;
}
.dropdown:hover .dropdown-list {
display: block;
}
What can I do to the nav sub Itens appear correctly, like the second image?
Thanks in advance!

Answer 1

You should try add to css code z-index: 1;