CSS3下拉菜单链接在iOS中不起作用答案

【问题标题】：CSS3 Dropdown Menu Links not working in iOSCSS3下拉菜单链接在iOS中不起作用
【发布时间】：2014-11-19 09:40:51
【问题描述】：

我遇到了 iOS 无法加载下拉菜单链接的问题，它在其他人中可以正常工作，只有 iOS。

直播网站：http://sandbox.myramani.com/espace/

基本上，当您通过任何 iOS 浏览器查看它时，导航下拉链接不会链接到内部页面，而只是刷新主页。谁能帮我弄清楚为什么会这样？

CSS：

#nav ul li ul.dd {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:absolute;
z-index:99;
top:60px;
left:0px;
margin-left:0px;
width:220px;
background:#fff;
display:none;
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
padding-bottom:10px;}

#nav ul li:hover ul.dd, #nav ul li:focus ul.dd {
display: block;
}

【问题讨论】：

ios 上没有悬停，但是当您点击该下拉菜单然后点击下拉菜单下的页面时，它会转到主页？我认为，如果是这种情况，它会转到主页，因为它会转到滑块中的链接，这可能是导航的父级和滑块之间的 z-index 问题。
你是对的，但在内页上同样的问题也适用。无法单击下拉菜单链接...我认为 :hover 是问题所在，需要替换为 :focus?但我无法让它工作。
我希望我有一些想法，我已经有几年没用过 :hover 了。
我知道它是什么。你是在导航中使用 display:none 然后 display:block 吗？
如果是这样，这是一个常见问题。仅发布您的导航 css 或至少发布默认值，然后发布 :hover 状态，我将发布修复程序

标签： html ios css

【解决方案1】：

这是什么原因：

onclick="return true"

在 ?可能是问题所在。我认为不需要 JS。

【讨论】：

我不太确定，我尝试实现它，但我会删除它以查看它是否有效，谢谢！
在 Safari 检查器中查看此内容，似乎导航中的某些
标记可能有一些损坏的代码。具体上课。看看这个awesomescreenshot.com/0123ypfs4a 尝试重新输入引号。可能粘贴了一些不好的字符。

【解决方案2】：

IOS 会忽略任何具有 display:none 或 visibility:hidden 的链接——即使 :hover 显示它。我不记得具体的了。

现在我得到了来自 Apple 的报价：

"如果页面内容在 mousemove 事件，不发送序列中的后续事件。”

替换为以下内容：

       #nav ul li ul.dd {
          box-sizing:border-box;
          -webkit-box-sizing:border-box;
          -moz-box-sizing:border-box;
          position:absolute;
          z-index:99;
          top:60px;
          left:0px;
          margin-left:0px;
          background:#fff;
          opacity:0; /* added */
          width:0px;/* added */
          height:0px;/* added */
          overflow:hidden;/* added */
          box-shadow: 0px 0px 10px rgba(0,0,0,.4);
          padding-bottom:10px;
      }

        #nav ul li:hover ul.dd, #nav ul li:focus ul.dd {
           opacity:1;
           width:220px;
           height:auto;
           overflow:visible;
        }

【讨论】：

谢谢，但它似乎没有用！我也尝试了内部页面，但是每当我尝试用手指在 iPhone 4S 上点击它们或单击（我正在使用 BrowserStack 测试 iPad 等）时，下拉链接似乎不起作用。我会采取更深入的了解，但无论如何感谢您的帮助！
演示站点使用的是 display:none，所以我无法在 ipad 上测试它
感谢克里斯蒂娜的所有帮助，但这似乎是一个我无法解决的问题。我已经删除了 display: none 并根据您的编辑使用了新样式，但即使菜单仍然不起作用。
再尝试一件事。使链接