如何使下拉菜单在悬停在父级li之外时保持可见

<ul>
  <li onmouseover="showDropdown()" onmouseout="hideDropdown()">父级li
    <ul id="dropdownMenu">
      <li>下拉菜单项1</li>
      <li>下拉菜单项2</li>
      <li>下拉菜单项3</li>
    </ul>
  </li>
</ul>

#dropdownMenu {
  position: absolute;
  display: none;
}

#dropdownMenu li {
  /* 下拉菜单项的样式 */
}

function showDropdown() {
  document.getElementById("dropdownMenu").style.display = "block";
}

function hideDropdown() {
  document.getElementById("dropdownMenu").style.display = "none";
}