CSS 可悬停下拉菜单不会在移动设备上关闭答案

【问题标题】：CSS hoverable dropdown menu doesn't close on mobileCSS 可悬停下拉菜单不会在移动设备上关闭
【发布时间】：2021-09-17 23:29:49
【问题描述】：

我已经实现了一个可悬停的下拉菜单，就像 w3schools 中的这个示例一样：

https://www.w3schools.com/howto/howto_css_dropdown.asp

在我的 PC 上它运行良好，但我在装有 iOS 12.1.2 的 iPhone 上尝试了该页面并显示了菜单，但是当我触摸菜单外的某些内容时它不会消失，即使它是按钮打开菜单。它在 Safari Mobile 和 Chrome for iOS 上进行了测试。

我尝试了这个实现，但没有任何改变：

Mobile dropdown menu won't go away

我的结构是这样的：

<div class="mobile__nav-wrapper>
  <button type="button" class="mobile__nav-button"></button>
  <div class="mobile__nav-content">
    <a href="home">Home</a>
    <a href="page">Page</a>
  </div>
</div>

我已经尝试过这样的实现 (index.gif=tested.gif)：

<div class="mobile__nav-wrapper>
  <button type="button" class="mobile__nav-button"></button>
  <div class="mobile__nav-content">
    <a href="home">Home</a>
    <a href="page">Page</a>
  </div>
  <img class="close" src="img/index.gif" />
</div>

这是我的 CSS：

.mobile__nav-wrapper{
    display: inline-block;
    position: absolute;
    top:1.6em;
    right: 0.2em;
    font-size: 1rem;
}
@-webkit-keyframes mobile__nav__btn-animation{
    0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
@keyframes mobile__nav__btn-animation{
    0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
.mobile__nav-btn{
    font-size: 1rem;    
    border: none;
    outline: none;
    color: #575757;
    padding: 0.50em 0.70em;
    background-color: rgba(244,244,244,0.95);
    font-family: inherit;
    margin: 0;
    border-radius: 3px;

    -webkit-animation-name: mobile__nav__btn-animation;

            animation-name: mobile__nav__btn-animation;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.mobile__nav-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: rgba(255,255,255,0.8);
    -webkit-box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
            box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
    line-height: 2em;
    font-size: 1.3em;
}
.mobile__nav-content a{
    color: #575757;
    background-color: rgba(255,255,255,0.8);
    text-decoration:none;
    display: block;
    padding-left: 0.5em;
    margin-left: -100vw;
}
.mobile__nav-content a:hover{
    background-color: rgba(163,183,108,0.85);
}
/*--------for the safari mobile browser----------*/
div img.close {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

div .mobile__nav-wraper:hover + img {
  display: block;
}
/*-------end of the safari mobile browser----------*/
.mobile__nav-wrapper:hover .mobile__nav-content{
    display: block;
}

如何在不使用 JS 的情况下实现这一点？还是绝对必要？

-----更新---- 正如 Viira 所要求的，这是一个 JSFiddle：

https://jsfiddle.net/9ymj80hw/1/

【问题讨论】：

一个 jsfiddle 或 codepen 会很有帮助！
您可以阅读这篇文章以了解有关下拉菜单上的hover、focus 的更多信息（不是您问题的答案）：Dropdown Menus with CSS
Viira 完成，您现在可以查看
ParthoDas 谢谢，我要去检查一下，也许我会在那里找到有用的东西

标签： css responsive

【解决方案1】：

我也只是在寻找解决方案。我最终通过在<body> 标签中添加tabindex 来解决它，如下所示：

<body tabindex="0">

这个小技巧可以让 iPad Safari 在被点击时将焦点放在身体上，并从下拉菜单中移除焦点。

【讨论】：