Раскрывающийся раскрывающийся список, перекрывающий существующие элементы / текст

Question

У меня есть раскрывающийся список, когда я его раскрываю, его элемент и существующие элементы управления смешиваются. Я хочу полностью скрыть элементы bg и выпадающий список внутри другого divs. Это мой код

dropdown.component. css

    .parent {
      display: block;
      position: relative;
      float: left;
      line-height: 30px;
      background-color: #4FA0D8;
      min-width: 18em;
    }
    
    .parent a {
      margin: 10px;
      color: #FFFFFF;
      text-decoration: none;
    }
    
    .parent.active>span>ul {
      display: block;
      position: absolute;
    }
    
    .child {
      display: none;
    }
    
    .child li {
      background-color: #E4EFF7;
      line-height: 30px;
      border-bottom: #CCC 1px solid;
      width: 100%;
    }
    
    .child li a {
      color: #000000;
    }
    
    ul {
      list-style: none;
      margin: 0;
      padding: 0px;
      min-width: 18em;
    }
    
    ul ul ul {
      left: 100%;
      top: 0;
      margin-left: 1px;
    }
    
    li:hover {
      background-color: #95B4CA;
    }
    
    .expand {
      font-size: 12px;
      float: right;
      margin-right: 5px;
    }

dropdowncompon enet. html file

    <ul #dropdown [ngClass]="isChild ? 'child' : ''">
        <li class="parent" *ngFor="let item of items" (click)="open(item)" [ngClass]="item.isOpen ? 'active' : ''">
            <a href="javascript:void(0);">{{item.name}}</a>
            <span class="expand" *ngIf="item.children.length > 0">&nbsp;&nbsp;&#10095;</span>
            <span dropdown *ngIf="item.children.length > 0 && item.isOpen" [items]="item.children" isChild="true"></span>
        </li>
    </ul>

Снимок экрана до и после раскрывающегося раскрывающегося списка . Извините за нечеткое изображение

введите описание изображения здесь

Answer 1

Проблема была исправлена ​​путем добавления двух атрибутов в стиле css .parent

position: relative;
z-index: 10000;