Div не перекрывает родительский div с переполнением, скрытым даже с z-index

Question

У меня есть ситуация, когда я хочу, чтобы опция списка меню открывалась за границей.Я использовал z-index, но это не работает вообще.Пожалуйста, помогите мне. Это проблема

HTML:

<div class="myprogram_list" #myprogram_list>
<div *ngFor='let myProgram of myPrograms;let i = index; trackBy:trackElement' class="col-md-3 programLists square-box-{{myProgram.rowIndex}}">
  <div class="programInfo">
    <a data-toggle="dropdown" class="dropdown-toggle" (click)="myProgram[i] = !myProgram[i]"><b>{{i}}</b></a>
    <span class="">{{myProgram.programName}}</span>
    <span class="">{{myProgram.leadPartner}}</span>
  </div>
  <div class="dropdown" [ngClass]="myProgram[i] ? 'open' : 'close'">
    <ul class="quickMenuOptions nopadding dropdown-menu">
      <li><a href="/quicklaunch"><i class='quickLaunch'></i>&nbsp; Quick launch</a></li>
      <li><a href="/program"><i class='managerMenber'></i>&nbsp;Manage member(s)</a></li>
      <li><a href="/program"><i class='managerExpert'></i>&nbsp;Manage expert(s)</a></li>
      <li><a href="/program"><i class="archiveProgram"></i>&nbsp;Archive program</a></li>
      <li><a href="/program"><i class="deleteProgram"></i>&nbsp;Delete program</a></li>
    </ul>
  </div>
</div>

Answer 1

Я не могу комментировать из-за отсутствия репутации, но вы уже пытались установить для позиции css «dropdown» что-то вроде absolute, а затем пытались установить z-index? И myprogram_list не должен иметь overflow:hidden. В этом случае вам придется переместить выпадающий OUT, но NEXT к элементу myprogram_list, чтобы оба были на одном «слое» ... O.c. вам придется написать некоторую логику, чтобы расположить меню в нижней части каждого выбора. Но так как вы имеете дело с Angular, это должно быть наименьшей проблемой:)