Answer: How to Make Material-UI Menu based on Hover, not Click

If hover not working checkout this solution.

Feb 20 '23

use **MenuListProps** in the Menu component and use your menu **closeFunction** -

MenuListProps={{ onMouseLeave: handleClose }}

example- 
 <Menu
      dense
      id="demo-positioned-menu"
      anchorEl={anchorEl}
      open={open}
      onClose={handleCloseMain}
      title={item?.title}
      anchorOrigin={{
            vertical: "bottom",
            horizontal: "right",
                    }}
      transformOrigin={{
            vertical: "top",
            horizontal: "center",
                    }}
      MenuListProps={{ onMouseLeave: handleClose }}
 />

I hope it will work perfectly.

Open Full Answer