css下拉菜单怎么兼容苹果

在制作网页时，下拉菜单是很常见的组件。在CSS中，我们可以使用:hover伪类来实现下拉菜单的效果，但是这种方法在苹果设备上有兼容性问题。下面我们来介绍如何解决这个问题。

我们来看一下一个简单的下拉菜单代码：

<nav>
  <ul>
    <li><a href="#">菜单1</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单3</a></li>
        <li><a href="#">子菜单4</a></li>
      </ul>
    </li>
  </ul>
</nav>

<style>
nav ul ul {
  display: none;
}

nav ul li:hover > ul {
  display: block;
}
</style> 

在Chrome或Firefox浏览器下，这段代码可以正常实现下拉菜单的效果。但是在Safari和iOS设备上会出现一些问题，比如当用户点击下拉菜单时，子菜单不会展开。

为了解决这个问题，我们需要在CSS中添加一些额外的样式，以达到兼容苹果设备的效果。

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

nav ul li:hover > ul,
nav ul ul li:hover > ul {
  display: block;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

nav ul ul li {
  position: relative;
}

nav ul ul li > a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #fff;
}

nav ul li > a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-bottom-color: #fff;
} 

我们在上面的代码中添加了许多新的样式，其中最重要的是给子菜单设置了position: absolute;和top: 100%;来让它们相对于父菜单定位。我们也添加了一些额外的样式来美化下拉菜单，比如给箭头和菜单添加了一些特殊的样式。

通过上面的代码，我们可以让下拉菜单在所有主流浏览器和苹果设备上兼容，并实现一个美观的下拉菜单效果。