如何在mouseout/mouseleave上显示活动的子菜单？

在mouseout/mouseleave上显示活动的子菜单可以通过以下几个步骤来实现：

1. 首先，为父菜单添加一个鼠标移出事件监听器，可以是mouseout或mouseleave事件。

parentMenu.addEventListener('mouseout', hideSubMenu);

1. 创建一个函数hideSubMenu，在函数中隐藏子菜单。

function hideSubMenu() {
  // 隐藏子菜单的代码
}

1. 然后，在hideSubMenu函数中，判断鼠标是否离开了父菜单或进入了子菜单。可以使用event对象的相关属性来进行判断。

function hideSubMenu(event) {
  // 判断鼠标离开的目标是否是父菜单或子菜单
  if (!parentMenu.contains(event.relatedTarget)) {
    // 隐藏子菜单的代码
  }
}

1. 如果鼠标离开的目标不是父菜单或子菜单，那么就隐藏子菜单。隐藏子菜单的方式可以根据具体需求选择，可以使用CSS的display属性、visibility属性或者动画效果。
2. 如果需要在子菜单上进行交互操作，例如点击子菜单的选项，可以添加一个鼠标移入事件监听器，当鼠标移入子菜单时，取消隐藏子菜单的操作。

subMenu.addEventListener('mouseover', cancelHideSubMenu);

1. 创建一个函数cancelHideSubMenu，在函数中取消隐藏子菜单的操作。

function cancelHideSubMenu() {
  // 取消隐藏子菜单的代码
}

通过以上步骤，当鼠标移出父菜单时，子菜单会被隐藏起来，当鼠标移入子菜单时，子菜单会保持显示状态，直到鼠标移出子菜单并移出父菜单时，子菜单才会隐藏。