CSS悬停下拉列表，选择触摸时的第一个链接

Question

我做了一个简单的下拉菜单，在悬停时触发。 我的问题是，在触摸设备上，如果我点击div的下半部分（这样我的触摸与隐藏的下拉菜单重叠），下拉列表中的第一个链接/元素就会被选中，我的浏览器会导航到该链接。

在#dropDownMenu上我将高度和不透明度设置为0并显示：none;并且在悬停#menu（主要是h4标签）

时相反

#dropDownMenu {
  position: relative;
  bottom: -10px;
  left: -10px;
  width: 250px;
  background-color: #555555;
  height: 0;
  overflow: hidden;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s;
}
#Menu:hover #dropDownMenu {
  display: block;
  height: auto;
  opacity: 1;
}

<div id="Menu">
  <h4>Menu</h4>
  <div id="dropDownMenu">
    <ul>
      <li><a href="/">Main</a>
      </li>
      <li><a href="/1">link1</a>
      </li>
      <li><a href="/2">link2</a>
      </li>
    </ul>
  </div>
</div>

它在计算机上运行得很好