CSS下拉菜单在iOS设备上无法使用 [英] CSS drop down menu is not working on iOS devices

问题描述

为什么我的CSS下拉菜单适用于Android和所有PC浏览器，但不适用于iOS设备？

  .mainHeaderBtns ul li ：hover> ul {
 display：block; 
} 
  

解决方案

一个下拉菜单，确保< a href =＃> 元素在页面上可见和可点击，我做了一个简单的演示，它工作正常。

  .nav> li> ul {display：none;}。nav> li：hover> ul {display：block;}  

 < ul class = nav> < li> < a href =＃>菜单项< / a> < ul> < li>子项< / li> < / ul> < / li>< / ul>  

，Apple ¹ 建议添加 onclick =void（0）我也发现 onclick =return false; 或 onclick =全部正常。

  div span {display：none;} div：hover span {display：inline;}  

 < div onclick =void（0）> Howdy< span> mates！< / span>< / div>   

---

¹ _{https://developer.apple.com/library/ios/documentation/AppleApplications /Reference/SafariWebContent/HandlingEvents/HandlingEvents.html}

Why does my CSS dropdown menu work on Android and all PC browsers, but not iOS devices?

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

解决方案

As of my tests, for a dropdown menus, make sure the <a href="#"> element is visible and clickable on the page, I have made a simple demo and it works fine.

.nav > li > ul {
  display: none;
}
.nav > li:hover > ul {
  display: block;
}

<ul class="nav">
  <li>
    <a href="#">Menu item</a>
    <ul>
      <li>Sub item</li>
    </ul>
  </li>
</ul>

For any element, Apple ¹ recommends to add onclick = "void(0)" I also found onclick="return false;"or onclick="" all works.

div span {
  display: none;
}
div:hover span {
  display: inline;
}

<div onclick="void(0)">Howdy <span>mates!</span></div>

---

¹_{https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html}

这篇关于CSS下拉菜单在iOS设备上无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！