Javascript 如何在鼠标上显示subnav在鼠标上隐藏

我正在尝试在.subnav toggle类的mouseenter上创建一个下拉subnav，但无法解决如何在鼠标也在subnav上时保持活动类，有任何建议或以前的示例吗

var-navtoggle=document.querySelector（'.subnav-toggle'）；
var subnav=document.querySelector（'.subnav'）；
navtoggle.addEventListener（'mouseover'，function（）{
subnav.classList.add（'active'）；
});
navtoggle.addEventListener（'mouseleave'，function（）{
subnav.classList.remove（'active'）；
});
.subnav{
高度：0px；
溢出y：隐藏；
过渡：不透明度0.35秒；
}
.subnav内部{
显示器：flex；
证明内容：之间的空间；
填充：40px 40px；
不透明度：0；
}
.subnav.active{
高度：自动；
}
.subnav.active.subnav内部{
不透明度：1；
过渡：不透明度0.35秒；
}
您应该在同一类事件中插入子菜单


var-navtoggle=document.querySelector（'.subnav-toggle'）；
var subnav=document.querySelector（'.subnav'）；
navtoggle.addEventListener（'mouseover'，function（）{
subnav.classList.add（'active'）；
});
navtoggle.addEventListener（'mouseleave'，function（）{
subnav.classList.remove（'active'）；
});
nav{
显示：内联flex；
}
.subnav开关{
宽度：80px；
}
导航a{
宽度：80px；
}
.subnav{
位置：绝对位置；
高度：0px；
溢出y：隐藏；
过渡：不透明度0.35秒；
}
.subnav内部{
显示器：flex；
证明内容：之间的空间；
填充：40px 40px；
不透明度：0；
}
.subnav.active{
高度：自动；
}
.subnav.active.subnav内部{
不透明度：1；
过渡：不透明度0.35秒；
}