Javascript 下拉菜单Mouseleave事件应忽略子元素

我在胡闹，试图构建与谷歌在该页面上使用的下拉菜单相同的下拉菜单：

我有一个问题，当鼠标离开下拉菜单的父导航元素时，下拉菜单关闭。我能做些什么来改进这一点？我的示例中的项目3包含下拉菜单。这只是一个练习片段。我并不急于完成它

（函数（）{
const parentNav=document.querySelector（'.parentNav'）；
const dropdown=document.querySelector（'.dropdown'）；
parentNav.addEventListener（'mouseenter'，函数（e）{
menuTransition（）；
this.classList.add（'dropdown-open'）；
});
parentNav.addEventListener（'mouseleave'，函数（e）{
menuTransition（）；
this.classList.remove（'dropdown-open'）；
});
函数menuTransition（）{
const dropDownContent=document.querySelector（'.dropDownContent'）；
dropDownContent.classList.add（'dropdown-transition'）；
setTimeout（函数（）{
dropDownContent.classList.remove（'dropdown-transition'）；
}, 500);
}
})();
#导航{
对齐项目：居中；
背景：1d0e96；
显示器：flex；
高度：60px；
位置：相对位置；
宽度：100%；
}
#导航ul{
对齐项目：居中；
显示器：flex；
身高：100%；
列表样式：无；
保证金：0；
填充：0；
}
#李海军{
身高：100%；
位置：相对位置；
}
#导航a{
对齐项目：居中；
颜色：#fff；
显示器：flex；
身高：100%；
填充：10px 20px；
文字装饰：无；
}
#导航a：悬停{
背景#10075d；
}
.下拉列表{
显示：块；
左：-169px；
溢出：隐藏；
指针事件：无；
位置：绝对位置；
最高：100%；
宽度：100vw；
}
.下拉内容{
背景：ddd；
显示器：flex；
弯曲方向：立柱；
填充：10px 25px；
指针事件：无；
变换：translate3d（0，-100%，0）；
转换：转换0s；
}
.下拉转换{
转变：转变；
}
.下拉列表打开.下拉列表内容{
变换：translate3d（0,0,0）；
}





Lorem ipsum dolor sit amet，是一位杰出的献身者。不要坐在狮子座上。完成前的枕叶连续性。主食或调味品。在大鼠前庭的一个广场上。tincidunt车辆处的前庭luctus sem。Mauris nec sapien aliquam，maximus arcu ac，调味品直径。我是马蒂斯·杜伊奎斯·波苏尔·比本杜姆。这是一个很好的例子。秃鹫前草。潜力悬钩子。虎口浮雕和肘部浮雕同侧前庭；Mauris-eu-libero-iaculis，前肢便利，同侧肢体。Suspendisse nec libero accumsan，孕妇nibh sed，blandit nibh。Suspendisse nec turpis imperdiet，vehicula justo nec，auctor mi






我将指针事件：all添加到.dropdown content元素中，然后将以下内容添加到CSS中：

.parent-nav:hover .dropdown-content {
   transform: translate3d(0, 0, 0);
}

这样，我就不再需要任何JavaScript了
 在
.dropdown content
下，更改为
指针事件：所有
都在css中，你会得到你想要的行为，但我真的不明白为什么任何javascript膨胀都是必要的，可以在没有侦听器、queryselector等的纯css中实现……谢谢。我知道你在说什么。我只是在谷歌的代码和样式表中翻找，并试图复制它们是如何做到的。然而，转换存在一个问题：加载页面时会闪烁动画的转换。我想这就是为什么在触发事件时JS被用来简单地添加CSS属性的原因。我想在这个例子中它不会这样做。我删除了所有的JS，并将其添加到CSS中，以及您的次要指针事件建议：。父导航：hover.dropdown内容{transform:translate3d（0，0，0）；}