Css Safari-转换在Safari（手机版）中不起作用

我的Iphone（Safari浏览器）访客抱怨我的菜单不起作用。因此，我在模拟器中尝试了它，发现没有工作的

悬停

或

转换

。在安卓系统上，一切都很好

/*内容菜单*/
.navigation_bg{
宽度：100%；
高度：65px；
背景#272d33；
显示：块；
}
.导航内容{
最小宽度：400px；
高度：65px；
最大宽度：1200px；
背景#272d33；
保证金：0自动；
文本对齐：居中；
显示：表格；
宽度：100%；
溢出：隐藏；
}
a、 航行{
显示：表格单元格；
垂直对齐：中间对齐；
边界：0px；
文本对齐：居中；
宽度：140px；
高度：65px；
文本转换：大写；
字体大小：正常；
背景：透明；
溢出：隐藏；
字体大小：14px；
单词包装：打断单词；
垫面：5px；
-webkit转换：translateY（0px）；
变换：translateY（0px）；
}
a、 导航img{
高度：35px；
宽度：35px；
}
a、 导航：：之后{
内容：''；
显示：块；
宽度：100%；
高度：5px；
背景#f23030；
-webkit过渡：所有0.4s都轻松推出；
-moz过渡：所有0.4都会变缓；
-o型过渡：所有0.4s缓解；
过渡：所有0.4s缓解；
位置：相对位置；
顶部：23px；
}
a、 导航：hover:：after{
-webkit转换：translateY（-5px）；
transform:translateY（-5px）；
}
a、 导航：focus：：after{
-webkit转换：translateY（-5px）；
transform:translateY（-5px）；
}
a、 导航：active:：after{
-webkit转换：translateY（-5px）；
transform:translateY（-5px）；
}
.mobile_菜单{
显示：无；
最小宽度：400px；
最大宽度：750px；
宽度：100%；
高度：65px；
背景：透明url（'../img/menu.png'）不重复；
背景位置：右10px中心；
}
@仅介质屏幕和（最大宽度：750px）{
.mobile_菜单{
显示：块；
}
.导航内容{
显示：块；
背景#272d33；
-webkit过渡：所有0.4s都轻松推出；
-moz过渡：所有0.4都会变缓；
-o型过渡：所有0.4s缓解；
过渡：所有0.4s缓解；
高度：305px；
}
a、 导航：：之后{
顶部：10px；
}
a、 航行{
最小宽度：400px；
宽度：100%；
显示：块；
填充顶部：10px；
高度：40px；
背景#272d33；
}
a、 导航img{
高度：25px；
宽度：25px；
}
.navigation_bg{
高度：65px；
溢出：隐藏；
-webkit过渡：所有0.4s都轻松推出；
-moz过渡：所有0.4都会变缓；
-o型过渡：所有0.4s缓解；
过渡：所有0.4s缓解；
}
.navigation\u bg:悬停{
高度：305px；
背景#f23030；
}
}
/*结束内容菜单*/

---

iOs Safari中存在悬停状态和过渡渲染问题。请注意，使用

：hover

伪类是使菜单工作的一种非兼容性方法

例如，制作菜单的两种方法： 1.使用标签（链接到隐藏的复选框）并将其放置在切换按钮上 2.使用javascript使菜单切换类