【发布时间】：2014-07-17 14:58:07
【问题描述】：
我在基于 Wordpress 的网站上为客户提供了一个基本的 CSS 下拉菜单。它只是 CSS 样式，没有 JS，并且可以在桌面上完美运行。
但是我们已经意识到，该菜单仅在 iPhone 上间歇性地工作，可能每 2 或 3 个页面加载一次，但大部分时间都已损坏，并且不允许对任何子页面进行任何访问。
发生的情况是下拉菜单在点击时会展开，这是应该的，但是下拉菜单中的链接不起作用。点击它们会关闭菜单并且什么都不做，或者，由于站点徽标位于下拉列表下方，就像您点击了徽标并重定向回主页一样。
按住下拉菜单中的链接会显示正常链接选项（复制、在新窗口中打开等），所以我知道它正在识别链接，只是不想在单击时正常运行.
该菜单在 iPad 上完美运行，而不是在 iPhone 上（这对我来说根本没有意义）。我觉得如果问题是一致的，在所有移动 safari 设备上一直发生，我也许能够解决这个问题，但它的间歇性让我很难过。此外，我在另一个客户的网站上使用了几乎相同的菜单代码，并且他们的在所有设备上都能完美运行。我已经尝试删除网站上的插件、广告和其他脚本（例如 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 */
}
【问题讨论】：
标签： css iphone mobile drop-down-menu