悬停时在不同div上显示子菜单

<div class="parent-menu">
  <div class="hover-area" onmouseover="showSubMenu('sub-menu1')">Div 1</div>
  <div class="hover-area" onmouseover="showSubMenu('sub-menu2')">Div 2</div>
  <div class="hover-area" onmouseover="showSubMenu('sub-menu3')">Div 3</div>
</div>

<div class="sub-menu" id="sub-menu1">
  <!-- 子菜单内容 -->
</div>

<div class="sub-menu" id="sub-menu2">
  <!-- 子菜单内容 -->
</div>

<div class="sub-menu" id="sub-menu3">
  <!-- 子菜单内容 -->
</div>

.parent-menu {
  display: flex;
}

.hover-area {
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px;
}

function showSubMenu(subMenuId) {
  // 隐藏所有子菜单
  var subMenus = document.getElementsByClassName('sub-menu');
  for (var i = 0; i < subMenus.length; i++) {
    subMenus[i].style.display = 'none';
  }
  
  // 显示对应的子菜单
  var subMenu = document.getElementById(subMenuId);
  subMenu.style.display = 'block';
}