无法关闭移动设备上的CSS下拉菜单

Question

下拉菜单显示完美。但是，即使使用菜单顶部的“关闭”链接，我也无法关闭移动设备上的菜单。奇怪的是，当使用菜单底部的“关闭”链接时，菜单确实关闭了。但是我需要菜单顶部的关闭链接才能正常工作-看起来要好得多。

关于以任何方式关闭移动设备上的下拉菜单的任何建议（使用关闭链接，在菜单外部点击等）？我只想用CSS关闭它。 Javascript将是我的第二选择。我不熟悉Jquery或AJAX等，因此仅在可能的情况下才需要使用CSS和Javascript。尚未找到任何在线有效的答案。

.dropbtn {
  background-color: gainsboro;
  color: black;
  border: 1px solid black;
  padding: 4px;
  font-size: 12px;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: silver;
}

#closeMobileMenu {
  padding;
  0px;
}

ul {
  padding: 0;
  margin: 0;
}

li.dropDownActivator {
  display: inline;
  position: relative;
  margin-right: 65px;
}

li.dropDownLink {
  display: block;
  background: silver;
  padding: 10px;
}

ul ul {
  position: absolute;
  display: none;
  left: 0;
  top: 100%;
}

li.dropDownActivator:hover ul {
  display: block;
}

li.dropDownActivator:hover ul #closeMobileMenu:active {
  display: none;
}

<ul>
  <li class="dropDownActivator">

    <button class="dropbtn">Menu</button>
    <ul>
      <!-- this 'Close' link does NOT close menu -->
      <li class="dropDownLink"><a href="" id="closeMobileMenu">Close</a></li>
      <li class="dropDownLink"><a href="example.com">Menu link 1</a></li>
      <li class="dropDownLink"><a href="example.com">Menu Link 2</a></li>
      <li class="dropDownLink"><a href="example.com">Menu Link 3</a></li>
      <!-- *** Strangely this link DOES close the menu, but the close link above doesn't -->
      <li class="dropDownLink"><a href="" id="closeMobileMenu">Close</a></li>
    </ul>
  </li>
</ul>