如何仅在悬停子菜单时才显示子菜单项？

在前端开发中，可以通过以下方式实现仅在悬停子菜单时才显示子菜单项：

使用CSS的:hover伪类选择器：通过设置子菜单项的display属性为none，然后在父菜单项的:hover伪类选择器中将子菜单项的display属性设置为block或其他合适的值。这样，在鼠标悬停在父菜单项上时，子菜单项就会显示出来。

示例代码如下：

HTML:

<ul class="menu">
  <li class="parent">菜单1
    <ul class="submenu">
      <li>子菜单1</li>
      <li>子菜单2</li>
      <li>子菜单3</li>
    </ul>
  </li>
  <li class="parent">菜单2
    <ul class="submenu">
      <li>子菜单4</li>
      <li>子菜单5</li>
      <li>子菜单6</li>
    </ul>
  </li>
</ul>

CSS:

.submenu {
  display: none;
}

.parent:hover .submenu {
  display: block;
}

使用JavaScript事件监听：通过JavaScript监听父菜单项的鼠标悬停事件，当鼠标悬停在父菜单项上时，将子菜单项的display属性设置为block或其他合适的值；当鼠标离开父菜单项时，将子菜单项的display属性设置为none。

示例代码如下：

HTML:

<ul class="menu">
  <li class="parent" onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">菜单1
    <ul class="submenu">
      <li>子菜单1</li>
      <li>子菜单2</li>
      <li>子菜单3</li>
    </ul>
  </li>
  <li class="parent" onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">菜单2
    <ul class="submenu">
      <li>子菜单4</li>
      <li>子菜单5</li>
      <li>子菜单6</li>
    </ul>
  </li>
</ul>

JavaScript:

function showSubMenu(parent) {
  var submenu = parent.querySelector('.submenu');
  submenu.style.display = 'block';
}

function hideSubMenu(parent) {
  var submenu = parent.querySelector('.submenu');
  submenu.style.display = 'none';
}

以上两种方法都可以实现仅在悬停子菜单时才显示子菜单项。具体选择哪种方法取决于项目需求和开发者的偏好。