Question

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

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

我把它缩小到这样一个事实：我没有包含在href标签中的菜单文本（例如“face”一词），就像在原始版本的代码中一样。多数民众赞成在哪里。在字面周围包裹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/

任何人都可以指出一种方法让ipt / 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的唯一方法是使用JavaScript。值得庆幸的是，它很简单：

var is_touch_device = 'ontouchstart' in document.documentElement;

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

css问题 - 下拉列表在iphone / ipad上无法正常工作

2 个答案: