Angular Material 菜单位置

Question

当子菜单打开时，角度材质菜单 ( https://material.angular.io/components/menu/overview ) 与主菜单重叠。 有什么办法可以从菜单按钮的底部启动子菜单？

我曾尝试在全局 css 中设置 css，但它也适用于相应的子菜单。

.cdk-overlay-pane {margin-top: 40px;} 这不起作用。

如果有人有解决方案，请告诉我。

谢谢。

Answer 1

如果您将 [overlapTrigger]="false" 添加到您的 mat-menu，您将获得所需的效果。

有了这个设置，点击菜单按钮，下拉菜单将在按钮下打开。

这是示例：

  <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>