title: How to Make Material-UI Menu based on Hover, not Click
body: <p>I am using Material-UI Menu.
  It should work as it was, but just using mouse hover, not click.
  Here is my code link: <a href="https://codesandbox.io/embed/vn3p5j40m0" rel="noreferrer">https://codesandbox.io/embed/vn3p5j40m0</a></p>
  
  <p>Below is the code of what I tried. It opens correctly, but doesn't close when the mouse moves away.</p>
  
  <pre><code>import React from "react";
  import Button from "@material-ui/core/Button";
  import Menu from "@material-ui/core/Menu";
  import MenuItem from "@material-ui/core/MenuItem";
  
  function SimpleMenu() {
    const [anchorEl, setAnchorEl] = React.useState(null);
  
    function handleClick(event) {
      setAnchorEl(event.currentTarget);
    }
  
    function handleClose() {
      setAnchorEl(null);
    }
  
    return (
      &lt;div&gt;
        &lt;Button
          aria-owns={anchorEl ? "simple-menu" : undefined}
          aria-haspopup="true"
          onClick={handleClick}
          onMouseEnter={handleClick}
        &gt;
          Open Menu
        &lt;/Button&gt;
        &lt;Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={handleClose}
          onMouseLeave={handleClose}
        &gt;
          &lt;MenuItem onClick={handleClose}&gt;Profile&lt;/MenuItem&gt;
          &lt;MenuItem onClick={handleClose}&gt;My account&lt;/MenuItem&gt;
          &lt;MenuItem onClick={handleClose}&gt;Logout&lt;/MenuItem&gt;
        &lt;/Menu&gt;
      &lt;/div&gt;
    );
  }
  
  export default SimpleMenu;
  </code></pre>