Question

我需要一些问题的帮助，我认为有些CSS可以解决。

我有这个导航栏（点击链接），当我将鼠标移到它上面并显示子菜单时，导航的内容与下面的内容混合。看看：

我用红线包围了当地的问题。

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

意识到子菜单内容与下面的文本框重叠，并且它是正确的。

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

我可以对nav sub Itens做什么，就像第二张图片一样？

提前致谢！

Answer 1

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

Html / CSS - 导航栏子菜单不会覆盖下面的内容

1 个答案: