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

我不知道这是否是问题，但您的主菜单上有链接。在触摸屏设备上，只有在您触摸＆＃34;在元素上（除非你在光子浏览器中使用模拟鼠标）。但是，这也会点击链接，从而使其重定向到目标网站。

编辑：看起来因为你不能将鼠标悬停在触摸屏设备的元素上，所以当你点击子菜单时，它首先取消了＆＃34;悬停＆＃34;状态，然后让你点击它下面的元素。

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

Wordpress在移动设备上放下故障

1 个答案: