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

<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>

.submenu {
  display: none;
}

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

<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>

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

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