要实现强制一个父菜单项的所有子菜单级别在悬停时处于活动状态(mega菜单),可以通过以下步骤来实现:
<nav>
<ul class="menu">
<li class="parent">
<a href="#">父菜单项</a>
<ul class="submenu">
<li><a href="#">子菜单项1</a></li>
<li><a href="#">子菜单项2</a></li>
<li><a href="#">子菜单项3</a></li>
</ul>
</li>
<li><a href="#">其他菜单项</a></li>
</ul>
</nav>
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.parent {
position: relative;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.parent:hover .submenu {
display: block;
}
const parentItem = document.querySelector('.parent');
parentItem.addEventListener('mouseenter', function() {
this.classList.add('active');
});
parentItem.addEventListener('mouseleave', function() {
this.classList.remove('active');
});
这样,当鼠标悬停在父菜单项上时,子菜单会显示,并且父菜单项会添加活动状态的样式。当鼠标离开父菜单项时,子菜单会隐藏,并且活动状态的样式会被移除。
对于腾讯云相关产品和产品介绍链接地址,可以根据具体需求和场景选择适合的产品,例如:
请注意,以上只是一些示例产品,具体选择应根据实际需求和情况进行。
领取专属 10元无门槛券
手把手带您无忧上云