Html/CSS - 导航栏子菜单不与下面的内容重叠

Question

我需要一些帮助来解决我认为 css 可以解决的问题。

我有这个导航栏（在 link 中单击），当我将鼠标移到它上面并出现子菜单时，导航栏的内容与下面的内容混合在一起。看看：

enter image description here

我用红线包围了问题所在的地方。

正确的导航需要像其他图片一样：

enter image description here

发现子菜单内容与下面的文本框重叠，是正确的。

我的html代码是：

 <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>

我的实际 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;
  }

如何才能使导航子 Itens 正确显示，如第二张图片？

提前致谢！

Answer 1

您应该尝试添加到 css 代码 z-index: 1;

Html/CSS - 导航栏子菜单不与下面的内容重叠

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

css

nav

navbar