mat-menu: overlay which comes from mat-menu prevent below menu being done mouseenter

Question

Summary

I tried to create a side navigation which contains several menus by using mat-nav and mat-menu, then its menu open by mouseenter.

But, the second menu didn't open its submenu.

I don't know how to cope with this problem, want to get some advice.

Help...

What I checked

It seems that the first's submenu overlay prevent the second being done.

So, when I checked mouseenter from bottom to top,(The second to the first) then it worked.

Sample

I created a sample. Here is my stackblitz. (Please click a hamburger menu on header, then hover side menu from to bottom.)

https://stackblitz.com/edit/angular-g88bvg

Expectation

My Expectation is to open the second menu when I do hover side navigation from top to bottom.

And, I want the floating menu to stay until another menu is focused.

Tiago Silva Tiago Silva · Accepted Answer · 2019-09-05T11:17:54

If the overlay overlapping the hovered mat-list-item is not an issue for you then just set it to true and it will trigger your openSubMenu method just fine, example :

<div class="example-container">
    <mat-toolbar color="primary" class="example-toolbar">
        <button mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1 class="example-app-name">Responsive App</h1>
  </mat-toolbar>

<mat-sidenav-container (backdropClick)="clickBack()" >

    <mat-sidenav class="side-container" mode="over" [fixedInViewport]="true" [opened]="false" #sidenav>

        <mat-list>
            <mat-list-item [matMenuTriggerFor]="menus" #menuTrigger="matMenuTrigger">
                <span (mouseenter)="openSubMenu(menuTrigger)">Apple</span>
            </mat-list-item>
            <mat-menu #menus="matMenu" [overlapTrigger]="true" [hasBackdrop]="false" class="top-sub-menu">
                <div>aaa</div>
                <div>aaa</div>
                <div>aaa</div>
            </mat-menu>
        </mat-list>

        <mat-list>
            <mat-list-item [matMenuTriggerFor]="menus2" #menuTrigger2="matMenuTrigger">
                <span (mouseenter)="openSubMenu(menuTrigger2)">Benjamine</span>
            </mat-list-item>
            <mat-menu #menus2="matMenu" [overlapTrigger]="true" [hasBackdrop]="false" class="top-sub-menu">
                <div>bbb</div>
                <div>bbb</div>
                <div>bbb</div>
            </mat-menu>
        </mat-list>

    </mat-sidenav>
  <mat-sidenav-content class="main-contents">
    Contents
  </mat-sidenav-content>
</mat-sidenav-container>
</div>

EDIT: I found your problem, after looking on your css file I noticed that you added margin to both of your mat-menu's and it can be seen on your inspect element that the overlay would overlap your mat-list-item's, to fix this you add the style position absolute so that it still applies your margin style but doesn't overlap the mouse inspect of the child elements, like so :

::ng-deep .top-sub-menu {
    font-size: 14px;
    color: black;
    min-width: 80px;
    margin-left: 60px;
    text-align: center;
    position:absolute;
}

If you turn off [overlapTrigger] again you get the previous behavior of the overlay ( you can turn this on or to your liking )

mat-menu: overlay which comes from mat-menu prevent below menu being done mouseenter

1 Answers