Angular Material menu position

Question

Angular material menu (https://material.angular.io/components/menu/overview) overlaps the main menu when sub menu opens. Is there any way i can start the submenu from bottom of my menu button?

I have tried setting css in global css however it gets applied to respective sub menus as well.

.cdk-overlay-pane {margin-top: 40px;} This doesn't work.

Please let me know if anyone has solution.

Thanks.

Answer 1

If you add [overlapTrigger]="false" to your mat-menu, you will get desired effect.

With that set, clicking on menu button, dropdown will open under button.

Here is example:

  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
       <button mat-menu-item>Item 1</button>
       <button mat-menu-item>Item 2</button>
    </mat-menu>