Angular material dropdown menu won't be closed - html

Question

I'm creating a menu component using angular material, some menu items have submenu and I'm using (mouseover)="menuTrigger.openMenu()" to open the drop down list.
<div class="row">
<div class="col-xl-12 widget-29">
<div class="widget no-bg ">
<div class="widget-body pt-0">
<div id="services" class="owl-carousel ">
<a [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" (mouseover)="menuTrigger.openMenu()" class="item has-shadow">
<div class="devices-item d-flex justify-content-center align-items-center">
<div class="room">{{'menu.reclamations' | translate}}</div>
</div>
<img id="rec" class="img-fluid" src="assets/img/smarthome/plaint.png" alt="...">
</a>
<a [matMenuTriggerFor]="menuu" #menuTriggerr="matMenuTrigger" (mouseover)="menuTriggerr.openMenu()" class="item has-shadow" [routerLink]="['/propositions/all']">
<div class="devices-item d-flex justify-content-center align-items-center">
<div class="room">{{'menu.propositions' | translate}}</div>
</div>
<img class="img-fluid" id="prop" src="assets/img/smarthome/feedback.png" alt="...">
</a>
<a [matMenuTriggerFor]="menuuu" #menuTriggerrr="matMenuTrigger" (mouseover)="menuTriggerrr.openMenu()" class="item has-shadow" [routerLink]="['/sondages/own']">
<div class="devices-item d-flex justify-content-center align-items-center">
<div class="room">{{'menu.participations' | translate}}</div>
</div>
<img class="img-fluid" id="review" src="assets/img/smarthome/review.png" alt="...">
</a>
<a class="item has-shadow" [routerLink]="['/documents']">
<div class="devices-item d-flex justify-content-center align-items-center">
<div class="room">{{'menu.documents' | translate}}</div>
</div>
<img class="img-fluid" src="assets/img/smarthome/file-search.png" alt="...">
</a>
<a class="item has-shadow" data-toggle="modal" data-target="#download">
<div class="devices-item d-flex justify-content-center align-items-center">
<div class="room">{{'menu.appmobiles' | translate}}</div>
</div>
<img class="img-fluid" id="mobile" src="assets/img/smarthome/smartphone.png" alt="...">
</a>
<a class="item has-shadow" [routerLink]="['/renseignement']">
<div class="devices-item d-flex justify-content-center align-items-center">
<div class="room">{{'menu.renseignements' | translate}}</div>
</div>
<img class="img-fluid" id="faq" src="assets/img/smarthome/faq.png" alt="...">
</a>
<a class="item has-shadow" [routerLink]="['/members']">
<div class="devices-item d-flex justify-content-center align-items-center">
<div class="room">{{'menu.lacommune' | translate}}</div>
</div>
<img class="img-fluid" src="assets/img/smarthome/building.png" alt="...">
</a>
</div>
</div>
</div>
</div>
<mat-menu #menu="matMenu" class="dropdown" id="down">
<button class="dropdown-item" [routerLink]="['/plaintes/new']">
<span><i class="la la-plus-circle la-2x"></i> Nouvelle réclamation</span>
</button>
<button class="dropdown-item" [routerLink]="['/plaintes/all']">
<span><i class="la la-eye la-2x"></i> Mes réclamations</span>
</button>
</mat-menu>
<mat-menu #menuu="matMenu" class="dropdown" id="down">
<button class="dropdown-item" [routerLink]="['/plaintes/new']">
<span><i class="la la-plus-circle la-2x"></i>Nouvelle proposition</span>
</button>
<button class="dropdown-item" [routerLink]="['/plaintes/all']">
<span><i class="la la-eye la-2x"></i> Mes propositions</span>
</button>
</mat-menu>
<mat-menu #menuuu="matMenu" [overlapTrigger]="false" class="dropdown" id="down">
<button class="dropdown-item" [routerLink]="['/plaintes/new']">
<span><i class="la la-plus-circle la-2x"></i> participation</span>
</button>
<button class="dropdown-item" [routerLink]="['/sondages/own']">
<span><i class="la la-eye la-2x"></i> mes participations</span>
</button>
</mat-menu>
</div>
when the mouse over a menu item the dropdown opened but won't be closed after that !! even I used (mouseleave)="menuTrigger.closeMenu()" the sub menu appear and disappear in the same time !!!