如何在mouseenter上显示sub-v在mouseout上隐藏

Question

我正试图在.sub-v切换类的mouseenter上创建一个下拉子控件，但无法在鼠标位于子控件上时保持活动类，有什么建议或以前的例子吗？

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 {
height: 0px;
overflow-y: hidden;
transition: opacity 0.35s ease;
}
.subnav-inner {
display: flex;
justify-content: space-between;
padding: 40px 40px;
opacity: 0;
}
.subnav.active {
height: auto;
}
.subnav.active .subnav-inner {
opacity:1;
transition: opacity 0.35s ease;
}

<header>
<div class="main-nav">
<nav>
<a class="subnav-toggle">Products</a>
<a href="">About</a>
<a href="">Contact</a>
</nav>
</div>
<div class="subnav">
<div class="subnav-inner">
<a href="">About</a>
<a href="">Contact</a>
<a href="">About</a>
</div>
</div>
</header>

Answer 1

您应该将子菜单插入到同一类事件中。

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{
display: inline-flex;
}
.subnav-toggle{
width: 80px;
}
nav a {
width: 80px;
}
.subnav {
position: absolute;
height: 0px;
overflow-y: hidden;
transition: opacity 0.35s ease;
}
.subnav-inner {
display: flex;
justify-content: space-between;
padding: 40px 40px;
opacity: 0;
}
.subnav.active {
height: auto;
}
.subnav.active .subnav-inner {
opacity:1;
transition: opacity 0.35s ease;
}

<header>
<div class="main-nav">
<nav>
<div class="subnav-toggle">
<a>Products</a>
<div class="subnav">
<div class="subnav-inner">
<a href="">About</a>
<a href="">Contact</a>
<a href="">About</a>
</div>
</div>
</div>  
<a href="">About</a>
<a href="">Contact</a>
</nav>
</div>
</header>
</html>