Question

我在iPad（iOS 7）上遇到了基于简单CSS悬停的下拉菜单的奇怪行为。

菜单按预期工作，首先点击显示下拉列表，第二个点击链接，除非页面上有YouTube视频。如果页面上有YouTube视频，则第一次点击会短时间显示该菜单，然后在没有第二次点击的情况下转到该链接。

HTML是：

        <nav>
            <ul>
                <li>
                    <a href="/menutest/index.html">Menu Test Home</a>
                    <ul>
                        <li>
                            <a href="/menutest/youtube.html">Youtube Video Page</a>
                        </li>
                        <li>
                            <a href="/menutest/plain.html">Plain Text Page</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

CSS是：

nav ul li ul {
    display:none;
}

nav ul li:hover ul {
    display:block;
}

YouTube代码为：

<iframe src="http://www.youtube.com/embed/O8_eFRZP1uQ?showinfo=0&rel=0" frameborder="0"></iframe>

Vimeo或Wistia上托管的视频不会出现此问题。

我之前发布了一个关于这个主题的问题，但由于我没有发现问题并没有提出明确的问题而撤回了该问题。

可以在http://silvermapleweb.com/menutest/

找到一个示例

Answer 1

当用户在/index.html，并且您单击菜单测试主页时，页面已经在该页面上，因此可能ios safari不会重新加载页面，因此下拉列表显示正确。

在youtube页面（/youtube.html）上，按菜单测试主页链接后，用户实际上会被发送到新页面。在页面重新加载新内容（现在位于/index.html）之前，会简要显示该菜单。

如果您不想将用户发送到新页面，请不要使用href位置，或添加event.preventDefault（）;在菜单测试主页链接上的单击事件上。

Answer 2

您需要为下拉菜单指定 z-index 。试试这个：

nav ul li:hover ul {
    display:block;
    z-index:1000;
}

Answer 3

我遇到了同样的问题，无法找到纯CSS解决方案。使用JavaScript实现下拉解决了我的问题。这是在JavaScript中实现它的一种方法（可能不是最好的，但它可以工作）：

jQuery('nav > ul > li').hover(function() {
var $parent = jQuery(this);
var $dropdown = $parent.children('ul');

$dropdown.show(0,function() {    
    $parent.mouseleave(function() {
        var $this = jQuery(this);
        $this.children('ul').fadeOut(10);
    });
});
});

然后你需要删除display：block;在CSS。

我没有使用您的确切HTML测试此代码，因此请原谅任何拼写错误！

以下是有关我的解决方案的更多详细信息：http://brianshim.com/webtricks/drop-down-menus-on-ios-and-android/

为什么YouTube会干扰iPad悬停下拉菜单？

3 个答案: