Angular 8 - Material - Dropdown menu

Bonsoir,
je me sert de Angular Material pour afficher un bouton affichant un submenu au clik mais quand je clique, le menu s'affiche sous tout le contenu de ma page web et non sus le bouton "DASHBOARD":
Pièce jointe 506697

J'aimerais que le menu s'affiche directement sous le bouton "DASHBOARD".

Dans l'outils de développement, la div "cdk-overlay-container" affichant le menu sous place sous la balise <app-root> où se trouve le bouton:
Pièce jointe 506713

Le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<mat-toolbar id="top-menu-container">
    <button mat-button [matMenuTriggerFor]="topMenu" id="top-menu">
        <h2 id="main-title">D A S H B O A R D<mat-icon>arrow_drop_down</mat-icon></h2>
 
    </button>
    <mat-menu #topMenu="matMenu" yPosition="below" id="top-menu-item-list">
        <button mat-menu-item class="top-menu-item">
            <mat-icon>add</mat-icon>
            Nouveau module
        </button>
        <button mat-menu-item class="top-menu-item">
            <mat-icon>build</mat-icon>
            Gestion module
        </button>
    </mat-menu>
</mat-toolbar>
<mat-toolbar id="left-menu">
    <a routerLink="/evenements"><div class="left-menu-button"><p class="left-menu-button-txt">Evénement</p></div></a>
    <a routerLink="/listes"><div class="left-menu-button"><p class="left-menu-button-txt">Liste</p></div></a>
    <a routerLink="/projets"><div class="left-menu-button"><p class="left-menu-button-txt">Projet</p></div></a>
    <a routerLink="/series"><div class="left-menu-button"><p class="left-menu-button-txt">Série</p></div></a>
 
</mat-toolbar>
<div class="main-content">
    <router-outlet></router-outlet>
</div>

Il est situé dans "app.component.html" qui est le point d'entré de mon projet.

Merci d'avance !