CSS 问题 - 下拉菜单在 iphone/ipad 上无法正常工作

Question

我有一个 css 驱动的下拉菜单，在 iphone 或 ipad 上无法正常工作。

它可以在我检查过的所有其他浏览器和设备上正常运行。

我已将其缩小到我没有将菜单文本（例如单词'face'）包含在 href 标记中这一事实，就像它在代码的原始版本中所做的那样。这就是与众不同的地方。将href标签包裹在字面上，下拉菜单在ipad / iphone上可以正常工作

显然，我可以只添加 href 并完成，但我真的不想这样做，否则每个有触摸屏的人，通常必须点击菜单文本才能显示下拉菜单，将带到链接点的任何地方。首先破坏了下拉菜单的全部要点！

代码如下：

<div id="dropMenuWrapper">
  <div id="dropMenu">
        <ul class="level1">
        <li class="submenu">Face
            <ul class="level2">
                <li class="subCatodd"><a href="">powder</a></li>
                <li class="subCateven"><a href="">cream</a></li>
            </ul>
        </li>
    </ul>
  </div>
</div>

css：

body {  behavior: url(includes/csshover.htc);}
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}


#dropMenuWrapper {
width:100%;
height:25px;
margin:0;
font-size:11px;
}

div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0; 
padding: 0;
}

div#dropMenu li {
position: relative; 
list-style: none; 
margin: 0; 
float: left; 
line-height: 1em;
}

div#dropMenu ul.level1 {
width:750px; 
margin:0 auto; 
text-align:center;
background:#4F4F4F;
height:25px;
z-index:1000;
}

div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block;text-decoration: none;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

还有一个 jsfiddle：http://jsfiddle.net/VvT6Y/1/

谁能指出一种让下拉菜单在 iphone/ipad 上工作而无需将文本设为链接的方法？

提前致谢:)

Answer 1

“要在有人点击菜单按钮时显示下拉菜单，您需要做的就是添加

onClick=”return true”

到触发菜单弹出的任何列表项（例如<LI>）中的“A”标记。这也适用于级联菜单。”

来自-http://blog.travelvictoria.com.au/2012/03/31/make-sure-your-websites-drop-down-menus-work-on-an-ipad/

Answer 2

您是否尝试将:active 和/或:focus 伪类添加到每个使用:hover 的实例？

因此，例如，li.submenu:hover 变为 li.submenu:hover, li.submenu:active。

:active 伪类通常在元素“被用户激活”时使用。最常见的例子是当用户开始点击链接的动作（“mousedown”事件），但还没有完成动作（“mouseup”事件）时，链接上的点。

:focus 伪类在元素具有焦点（可以接受输入）时使用。这在表单控件中最为明显，但实际上它的使用频率要高得多（有没有看到链接周围的小虚线边框，尤其是当您通过表单时？那是:focus）。

(W3C info on both.)

我提到两者，因为我不能 100% 确定在这种情况下会使用哪一个 iOS Safari。我假设:focus，但我从浏览器中看到了更奇怪的东西。

（附带说明，您不需要 div#dropMenu。ID 应该是唯一的，所以只需 #dropMenu 就足够了。如果您的 ID 在您的页面上不是唯一的，那么您使用的 ID 是错误的。 )

编辑如果伪类不起作用，那么目前唯一能够处理它的方法就是使用 JavaScript，很遗憾。值得庆幸的是，它很简单：

var is_touch_device = 'ontouchstart' in document.documentElement;

检测功能，然后您可以使用它来触发某些行为（添加类等）以模拟效果。如果您碰巧已经在使用 Modernizr，那么您可以使用它的 Modernizr.touch 函数来检测触摸屏。