消除触摸屏/移动设备上的下拉菜单

Question

我使用HTML和CSS在导航栏中创建了一个下拉菜单；没有JavaScript或框架。我将伪类:hover添加到了CSS中，以便使用display: block显示菜单内容 当用户将鼠标悬停在菜单btn上时，其内容显示在菜单下方。在桌面上完美运行。 我需要在触摸屏设备上具有相同的效果，只是现在用户将点击菜单链接以使其在下面显示内容，并且当用户在屏幕上的任何其他位置点击时，它将关闭。当前，用户可以点击菜单btn，它将显示内容，但是无法关闭它。可以在CSS中实现吗，还是Java语言是唯一的选择？如果是JS，我是否需要删除CSS :hover才能使JS功能正常工作？我似乎找不到合适的文章或教程来帮助我理解。
这是我的HTML

<div class="nav__menus">
  <button class="btn btn__nav" id="menu">Menus<i class="fa fa-caret-down"></i></button>
  <div class="menu-dropdown-content">
    <a target="_blank" href="documents/Food.pdf">Food</a>
    <a target="_blank" href="documents/BeerandWine.pdf">Beer and Wine</a>
    <a target="_blank" href="documents/Appetizers.pdf">Appetizers</a>
  </div>
</div>

这是我的CSS

.menu-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.menu-dropdown-content a {
  float: none;
  color: var(--primary-black);
  padding: 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.nav__menus:hover .menu-dropdown-content {
    display: block;
    margin: 0 24px;
}

需要明确的是，我希望用户可以点击屏幕上的任意位置以关闭下拉菜单。