Angular Material Menu hover to open dropdown instead of clicking, click should be disabled

The dropdown list can be opened by hovering title text. But the problem is , the click event still works. When I hover mouse the dropdown is opened, when I click title text, the dropdown will shake a little bit. Is there a way to disable mat menu's click event and let mouseover/mouseleave handle dropdown open/close only? Here is my code

<span [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" (mouseover)="menuTrigger.openMenu()>Menu</span>
<mat-menu #menu="matMenu">
<div (mouseleave)="menuTrigger.closeMenu()">

</div>
</mat-menu>