Question

我在基于Wordpress的网站上为客户端提供了基本的CSS下拉菜单。它只是CSS样式，没有JS，并且在桌面上完美运行。

但是我们已经意识到菜单只能在iPhone上间歇性地工作，可能每2或3页加载一次，但大部分时间都被破坏，不允许任何子页面访问。

下拉菜单会随时展开，但是下拉菜单中的链接不起作用。点击它们关闭菜单并且什么都不做，或者，因为站点徽标位于下拉列表下方，就像您点击徽标并重定向回主页一样。

按住下拉列表中的链接会显示正常链接选项（复制，在新窗口中打开等），因此我知道它正在识别链接，它只是不想在单击时正常运行

菜单在iPad上完美运行，而不是iPhone（对我来说根本没有意义）。我觉得如果问题是一致的，在所有移动旅行装置上一直都在发生，我或许能够解决这个问题，但它的间歇性让我感到难过。此外，我在另一个客户的网站上使用了几乎相同的菜单代码，他们在所有设备上都能完美运行。我已经尝试删除网站上的插件，广告和其他脚本（例如Hellobar）以查看它是否存在冲突，但似乎无法始终如一地解决问题。

有问题的网站是http://www.twopeasandtheirpod.com/。请参阅“关于”和“在侧面”下方的下拉列表。

非常感谢您对此进行故障排除的任何帮助！

菜单的结构是wordpress'默认菜单结构。用于参考的CSS：

.centeredmenu {
color: #fff;
font-size: 16px;
font-family: MergeRegular, Arial, sans-serif, Helvetica;
clear: both;
float: left;
margin: 0;
padding: 0;
width: 100%;
border: none;
font-weight: normal;
text-transform: lowercase;
z-index: 100;
position: relative;
height: 30px;
line-height: 30px;
background-color: #65b020;
}

/* Top menu items */
.centeredmenu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
position: relative;
right: 50%;
}
.centeredmenu ul li {
margin: 0 3px;
padding: 0;
float: left;
position: relative;
left: 50%;
}
.centeredmenu ul li a {
display: block;
margin: 0;
padding: 0 12px;
text-decoration: none;
color: #ffffff;
}
.centeredmenu ul li.active a {

}
.centeredmenu ul li a:hover {
color: #bbda6d;
}
.centeredmenu ul li:hover a,
.centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
color: #bbda6d;
}

/* Submenu items */
.centeredmenu ul ul {
display: none; /* Sub menus are hiden by default */
position: absolute;
margin: 0;
padding: 0;
top: 30px;
line-height: 24px;
font-size: 13px;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
right: auto; /*resets the right:50% on the parent ul */
width: 160px; /* width of the drop-down menus */
background-color: #65b020;

}
.centeredmenu ul ul li {
left: auto;  /*resets the left:50% on the parent li */
padding: 0;
margin: 0; /* Reset the 1px margin from the top menu */
clear: left;
width: 100%;
}
.centeredmenu ul ul li:before {
display: none;
}
.centeredmenu ul ul li a,
.centeredmenu ul li.active li a,
.centeredmenu ul li:hover ul li a,
.centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
margin: 0;
padding: 7px 12px;
line-height: 1.4;
color: #ffffff;
}
.centeredmenu ul ul li a:hover,
.centeredmenu ul li.active ul li a:hover,
.centeredmenu ul li:hover ul li a:hover,
.centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background-color: #77c12e;
}

/* Flip the last submenu so it stays within the page */
.centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
.centeredmenu ul li:hover ul,
.centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}

Answer 1

你正在使用:hover状态，这些状态是最好的错误，最糟糕的是永远不会在触摸屏设备上运行。个别浏览器有时可以将其重新解释为像onclick一样工作，但这是一个废话。

而是将onmouseover和onclick用于桌面，因此您可以将onclick故障转移到触摸屏。

仅限CSS的下拉菜单并不总是适用于iPhone

1 个答案: