jquery - 移动设备上的 Wordpress 下拉故障

Question

我无法在手机上显示下拉菜单。它出现并适用于平板电脑，但它不适用于 iphone。

我的代码看起来很准确，但显然有什么东西阻止它正确显示。

当您在 iphone 上访问该站点时(它也可能在 android 上访问)，每个按钮都可以单击，但子菜单和常规菜单的按钮不能通过下拉菜单单击。它在扩展时会出现一点故障，然后无法单击下拉菜单中的任何内容，但可以单击所有其他菜单项。

有什么想法吗？

这是网站:www.smilesavvy.com 这是顶部菜单导航。

这也是我的 CSS:

nav {
    float: right;
    margin-top: 45px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    text-align: center;
    position: relative;
}

nav li {
    margin: 0;
    display: inline-block;
    margin-left: 15px;
    position: relative;
}

nav li a {
    text-decoration: none;
    font: 1.24em 'Cabin Condensed', sans-serif;
    font-weight: 400;
    padding: 4px 6px;
}

nav li:hover a {
    background: #9fcf67;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

nav li ul {
    display: none;
}

nav li:hover ul {
    display: block;
    position: absolute;
    z-index: 999;
    margin-left: 0;
}

nav li:hover li {
    float: none;
    margin: 0;
    white-space: nowrap;
    width: 100%;
}

nav li:hover li a {
    display: block;
    padding: 7px 35px 7px 10px;
    text-align: left;
    text-decoration: none;
    background: #9fcf67;
    color: #00456a;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

nav li:hover ul.sub-menu li a:hover {
    background: #bbf774;
}

Answer 1

我不知道这是否是问题所在，但您的主菜单上有链接。在触摸屏设备上，仅当您“触摸”元素时才会触发悬停(除非您像在光子浏览器中那样使用模拟鼠标)。但是，这也会单击链接，从而使其重定向到目标网站。

编辑:看起来因为你不能悬停在触摸屏设备的元素上，所以当你点击子菜单时，它首先取消了“悬停”状态，让你点击它下面的元素.

我建议使用一些方法来检查它是否是移动设备。如果它是那么而不是悬停，让它点击显示或类似的东西。或者您可以在子域上创建一个移动站点，并在用户使用移动设备时使用 php 将用户重定向到它。