Dropmenu 从头开始​​，没有 UI 库

如何解决Dropmenu 从头开始​​，没有 UI 库

我想从头开始构建一个下拉菜单，一旦我将鼠标悬停在一个项目上就会显示，一旦我离开下拉菜单，它就会关闭它。我现在想弄清楚的问题是，当我离开打开的下拉菜单并最终决定再次打开时，如何保持下拉菜单打开？

const App = () => {
  const [dropBox,setDropBox] = useState(false);

  const enableDrop = () => {
    setDropBox(true);
  };
  const disableDrop = () => {
    setTimeout(() => {
      setDropBox(false);
    },1200);
  };

  const dropMenu = (
    <div
      className="dropMenuContainer"
      onMouSEOver={enableDrop}
      onMouseLeave={disableDrop}
    >
      <h1>hello</h1>
    </div>
  );

  return (
    <div className="navContainer">
      <div className="navMenu">
        <ul>
          <li>Home</li>
          <li onMouSEOver={enableDrop}>Projects</li>
          {dropBox && dropMenu}
          <li>Contact</li>
        </ul>
      </div>
    </div>
  );
};