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

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">
                       <a href="">{{menu.nmMenu}}</a>
                       <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;