:Hover Css 菜单仅在 iOS Safari 上不打开。答案

【问题标题】：:Hover Css Menu doesn't open on iOS Safari ONLY.:Hover Css 菜单仅在 iOS Safari 上不打开。
【发布时间】：2016-03-23 11:34:01
【问题描述】：

我遇到了一个奇怪的问题。在我正在编码的网站之一上，我使用 css hover 命令将下拉菜单附加到按钮上。众所周知，在移动设备上，悬停命令会转化为点击。问题是无论我做什么，我都无法让 iOS safari 注册一次点击，这使得整个下拉菜单仅在 iOS safari 上无法访问。它适用于 iPhone 上的 chrome，适用于每个桌面浏览器。有什么想法吗？

这是我的 CSS：

/* Reserve Pull Down */

.reserve {
    font-size: 30px;
    color: white;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 30px;
}

.reservetitle{
    color: white;
}

.reservedropdown {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
}

.reserve:hover .reservedropdown {
    display: block;
}

.reserve.active  .reservedropdown {
    display: block;
}

/* 保留下拉结束 */

这是我的 html....

<div class="reserve">  
        <a class="reservetitle">Reserve</a>
            <div class="reservedropdown">
                <a class="dropdowntext" href="reserve/index.html">By Location</a>
                <div class="dropdowngap"></div>
                <a class="dropdowntext" href="tel:+13014333005">Call Now</a>
            </div>
        </div>

有什么想法吗？我很难弄清楚。我试过“：active”，“：focus”。当然还有 ":hover"。无法在 iOS Safari 上运行任何东西。任何帮助，将不胜感激。干杯! -朱利安

【问题讨论】：

标签： html ios css

【解决方案1】：

我可以通过稍微调整你的 HMTL 来让它工作

http://codepen.io/bjornmeansbear/pen/wGdzMg

我只是确保<a class="reservetitle">Reserve</a> 有一个href="" ... <a href="#" class="reservetitle">Reserve</a>

浏览器肯定会将其视为您单击/悬停在其上的链接，然后一切正常。

【讨论】：