<p><br /></p> <pre class="brush:php;toolbar:false;">&lt;Drawer anchor="left" className="drawerArea left-navigate" variant="permanent" open={true} PaperProps={{ style: { width: "inherit", background: "#172B4D", backgroundImage: `linear-gradient(to right,#172B4D 60% , white 40%)`, border: "none", overflowY: "hidden", }, }} &gt; &lt;Box&gt; &lt;Box&gt; &lt;Box&gt; &lt;Box className="listing" sx={{ width: "100%" }}&gt; &lt;List className="mp-0 wh-100 overflow-overlay"&gt; {menus &amp;&amp; menus.length &gt; 0 &amp;&amp; menus.map((item, index) =&gt; ( &lt;Box key={index}&gt; &lt;ListItem ref={popoverAnchor} className={`mp-0 navigationList flex-start-center`} ** onMouseEnter={(e) =&gt; { setNestedArr([...item?.children]); popoverEnter(e); setAnchorEl(e?.currentTarget); }} onMouseLeave={(e) =&gt; { popoverLeave(e); }}** onClick={(e) =&gt; { console.log(item,'parent_clicked') }} &gt; &lt;ListItemText&gt; &lt;Box&gt; {micons[item?.name] ? ( micons[item?.name] ) : ( &lt;Icon&gt;{item?.icon_class}&lt;/Icon&gt; )} &lt;/Box&gt; &lt;Typography&gt; {item?.name} &lt;/Typography&gt; &lt;/Typography&gt; } /&gt; &lt;/ListItem&gt; &lt;/Box&gt; ))} &lt;/List&gt; &lt;/Box&gt; &lt;/Box&gt; &lt;/Box&gt; {open &amp;&amp; nestedArr.length ? ( &lt;NestedMenu open={open} setOpen={(val) =&gt; setOpen(val)} anchorEl={anchorEl} nestedArr={nestedArr} lightBackground={lightBackground} secondaryColor={secondaryColor} popoverAnchor={popoverAnchor} popoverEnter={popoverEnter} popoverLeave={popoverLeave} /&gt; ) : null} &lt;/Box&gt; &lt;/Drawer&gt;</pre> <p><strong>页面左侧有一些菜单（使用MUI库和material-ui-nested-menu-item库），当鼠标悬停在Listitems上时，它会显示一个带有嵌套或子菜单的菜单，并在鼠标离开时关闭菜单，但我面临的问题是在悬停在菜单上时同时触发了onMouseLeave事件，所以菜单不会打开。我无法找出问题所在。</strong></p>