如何在mouseleave上隐藏嵌套子菜单（用于多个嵌套子菜单）

Question

当我进入子菜单时，它会隐藏/生产率，但是当我进入嵌套菜单时，即概述/咨询等，它将自动关闭。 在此处输入代码    服务         arrow_drop_down       

  <mat-menu #SERVICE="matMenu" overlapTrigger="false">
    <span (mouseleave)="serviceTrigger.closeMenu()" style="width:50px">
    <button mat-menu-item [mat-menu-trigger-for]="CargoWise" #cargowiseTrigger="matMenuTrigger"  (mouseenter)="cargowiseTrigger.openMenu()"> CargoWise One</button>
     <button mat-menu-item>
        <a [routerLink]="['/service-productivity']">
          <span>Productivity</span>
        </a>
      </button>
    </span>
  </mat-menu>

  <mat-menu #CargoWise="matMenu">
   <span (mouseleave)="cargowiseTrigger.closeMenu()">
    <button mat-menu-item>
      <a [routerLink]="['/service-cargowise-overview']">
        <span>Overview</span>
      </a>
    </button>
    <button mat-menu-item>
      <a [routerLink]="['/service-cargowise-consulting']">
        <span>Consulting</span>
      </a>
    </button>