列出用于下拉菜单的项目：在 Safari 上失败

Question

我正在使用 css 格式化下拉菜单的 ul / lis。在 Firefox 和 IE 上一切正常，但在 iPhones（例如 Safari）上失败：MENU 按钮未激活。

<ul class="Menu">
  <li>MENU
     <ul>
     <li> <a href="foo.html">Sub 1</a> </li>
     ...
    </ul>
  </li>
</ul>

相关CSS:

ul.Menu li:hover>ul{ display:block; }

对 jsfiddle 中所涉及的 css 表示歉意；它是从满足我需要的网站复制的。

我不明白为什么 iPhone 会失败。（PS：我没有；需要请朋友检查任何模组。）

Answer 1

可以用JavaScript模拟悬停状态。如果您使用的是 jQuery，请尝试这样的操作（从 this other post 借来的）：

$('body').bind('touchstart', function() {});

这是一个 updated demo - 经过测试可以在 Android 上的 Chrome 上工作。

您可能还需要将 :active 选择器添加到具有 :hover 选择器的相同声明中，如本补丁中所示：

--- <unnamed>
+++ <unnamed>
@@ -1,6 +1,7 @@
 ul.Menu ul {
     display:none;
 }
+ul.Menu li:active>ul,
 ul.Menu li:hover>ul {
     display:block;
 }
@@ -21,6 +22,8 @@
     margin:0px 10px 0px 5px;
 }
 ul.Menu a,
+ul.Menu li.dis a:active,
+ul.Menu li.sep a:active,
 ul.Menu li.dis a:hover,
 ul.Menu li.sep a:hover {
     display:block;

（等等）

列出用于下拉菜单的项目：在 Safari 上失败

List items used for dropdown menu: fails on Safari

html

css

mobile-safari

ios