我是一个新手，在将鼠标离开事件扩展到呈现的子菜单时遇到了麻烦。
当前鼠标悬停在导航栏项目和子菜单呈现.鼠标离开导航栏项目到从子菜单选择项目.子菜单消失.我想子菜单保持打开当鼠标在导航栏项目和子菜单内.我已经尝试了多个不同的事情在这一点上，但我挣扎着理解如何使一些条件逻辑将工作.
下面是呈现子对象的函数。

function NavItem(props) {
  const [open, setOpen] = useState(false)
  return (
    <li className='nav-item'>
      <p1 className='icon-button' onMouseEnter={() => setOpen(!open)} onMouseLeave={() => setOpen(false)}>
        {props.name}
      </p1>
      {open && props.children}    
    </li> 
  )
}

这是子函数。

function PlatformMenu() {
  return (
    <div className='dropdown' >
      <li>
        <ul className='dropdown-item' ><a href='#'>Sub-Menu Item</a></ul>
      </li>
    </div>
  )
}