Как сделать так, чтобы выпадающий список был виден за пределами родительского компонента? угловатый

Question

У меня есть проект Angular, и в моем проекте у меня есть верхний колонтитул в моем компоненте панели инструментов. В нем есть компонент выпадающего меню. Я использую Angular 5 и начальную загрузку, чтобы построить свой выпадающий список.

Проблема в том, что заголовок на «панели инструментов» имеет высоту всего 100 пикселей, и когда раскрывающийся список должен быть выше, он не будет отображаться за нижней частью заголовка, который является исходным компонентом раскрывающегося списка.

toolbar.component.html

<header>
    <div id="header-logo">
       <img id="header-img" [src]="fullImagePath">
    </div>
    <div id="selector">  
       <p>All Sites</p> 

       <app-dropdown></app-dropdown>

    </div>
</header>

toolbar.component.css

 header {
    height: 100px;
 }

dropdown.component.ts

  <li class="dropdown" dropdown> <!-- {1} -->
      <a dropdownToggle role="button"> <!-- {2} -->
        Dropdown <span class="caret"></span></a>
      <ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
          <li><a href="#">Action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
      </ul>

dropdown.component.css

li {
    z-index: 1;
}

Что я могу добавить или изменить, чтобы раскрывающийся список мог распространяться вниз за пределы высоты заголовка на панели инструментов, 100px?

Спасибо!