角度材质菜单位置

Question

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

我尝试在全局css中设置css，但是它也适用于各个子菜单。

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

请让我知道是否有人可以解决。

谢谢。

Answer 1

如果将[overlapTrigger] =“ false”添加到您的菜单，您将获得理想的效果。

设置好之后，单击菜单按钮，下拉菜单将在按钮下面打开。

这是示例：

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