创建悬停菜单以在悬停时打开菜单（一次只打开一个菜单）。

这是一个使用HTML、CSS和JavaScript创建悬停菜单的示例解决方案：

HTML代码：

<ul class="menu">
  <li class="menu-item">菜单项1
    <ul class="submenu">
      <li>子菜单项1</li>
      <li>子菜单项2</li>
      <li>子菜单项3</li>
    </ul>
  </li>
  <li class="menu-item">菜单项2
    <ul class="submenu">
      <li>子菜单项4</li>
      <li>子菜单项5</li>
      <li>子菜单项6</li>
    </ul>
  </li>
  <li class="menu-item">菜单项3
    <ul class="submenu">
      <li>子菜单项7</li>
      <li>子菜单项8</li>
      <li>子菜单项9</li>
    </ul>
  </li>
</ul>

CSS代码：

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f9f9;
  padding: 0;
}

.menu-item:hover .submenu {
  display: block;
}

.submenu li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.submenu li:last-child {
  border-bottom: none;
}

JavaScript代码（可选，用于一次只打开一个菜单）：

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    closeAllSubmenus();
    item.querySelector('.submenu').style.display = 'block';
  });
});

function closeAllSubmenus() {
  const submenus = document.querySelectorAll('.submenu');
  submenus.forEach(submenu => {
    submenu.style.display = 'none';
  });
}

这段代码创建了一个带有子菜单的悬停菜单。当鼠标悬停在菜单项上时，对应的子菜单将显示出来。如果想要一次只打开一个菜单，可以使用附加的JavaScript代码实现，它会在打开一个子菜单之前关闭所有其他子菜单。