jquery - 手机上的Wordpress Drop Down Glitch

我的下拉菜单无法在手机上显示，我遇到了麻烦。它可以显示并在平板电脑上运行，但不适用于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;
}

最佳答案

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

编辑：看来，由于您无法将鼠标悬停在触摸屏设备上的元素上，因此，当您点击子菜单时，它首先取消了“悬停”状态，而是使您单击了它下面的元素。

我建议使用一些方法来检查它是否是移动设备。如果不是，则将其悬停以使其显示或类似内容。或者，您可以在子域上创建移动站点，并在用户移动时使用php将用户重定向到该站点。