Safari浏览器中的网站出现了异常的阴影现象

Question

<p>我建了一个网站，但在Safari浏览器上的菜单表现得很奇怪。请查看下面的视频，我在视频中展示了问题。只有在Safari浏览器中出现问题，其他浏览器都正常。</p> <p>可以在此处查看Safari中的问题视频 https://vimeo.com/757367403</p> <p>这是我的CSS，有人知道一些技巧来解决这个问题吗？</p>

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

.elementor-nav-menu {
    对齐项目：居中；
}

.elementor-nav-menu * {
    字体系列：“Lato”，无衬线！重要； 
    
}

html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4) a {
    字体大小：16px！重要；
    内边距：15px 0px！重要；
}

.elementor-nav-menu > li:第一个孩子 {
    背景颜色：#00aeef；
    变焦：0.85；
}

.elementor-nav-menu > li:第n个孩子(2n) {
    背景颜色：#ef6500！重要；
    宽度：170px！重要；
    高度：170px！重要；
    缩放：0.9！重要；
}

.elementor-nav-menu >李阿{
    弹性增长：0！重要；
}

.elementor-nav-menu > li:第n个孩子(7n) {
    背景颜色：#e8b736！重要；
    变焦：0.85；
}
.elementor-nav-menu > li:nth-child(3) {
    背景颜色：#e8b736！重要；
    宽度：220px；
    高度：220px；
    填充：0 10px！重要；
}

.elementor-nav-menu > li:第n个孩子(4n) {
    背景颜色：#66cc9a！重要；
    变焦：0.85；
}
html[lang="kl-kl"] .elementor-nav-menu > li:第n个孩子(4n) {
    背景颜色：#66cc9a！重要；
    缩放：1.05！重要；
    填充：0 0px！重要；

    
}

.elementor-nav-menu > li:nth-child(4) {
        保证金：0 自动；
}

.elementor-nav-menu > li:第n个孩子(5n){
    背景颜色：#00aeef；
    变焦：1.1；
}

.elementor-nav-menu > li:第n个孩子(6) {
    宽度：180px！重要；
    高度：180px！重要；
}
.elementor-nav-menu > li:nth-child(5) {
    宽度：170px！重要；
    高度：170px！重要；
}

.elementor-nav-menu >李{
        -moz-边框-半径：70px； 
   -webkit边框半径：70px； 
    边界半径：50%；
        背景大小：封面；
        背景重复：无；
      宽度：139px；
        高度：139px；
        文本对齐：居中；
        边距：0 10px！重要；
    
      显示：柔性； /* 或内联柔性 */
    对齐项目：居中； 
    调整内容：居中；
    
      过滤器： drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.75));
}

.elementor-nav-menu >李阿{
    颜色：#fff！重要；
    字体大小：18px！重要；
    自动换行：换行！重要；
    断字：断字！重要；
    空白：正常！重要；
    行高：26px；
    文本对齐：居中；
}
.elementor-nav-menu >李一：悬停{
    行高：30px；
}

.elementor-nav-menu li a .sub-arrow {
    显示：无；
}

.elementor-nav-menu > .子菜单:第n个子菜单(3) {
    背景颜色：红色；
}

.elementor-nav-menu--dropdown li a {
    调整内容：居中；
}

.elementor-nav-menu--dropdown {
    -webkit边框半径：15px；
  -moz-边框-半径：15px；
  边框半径：15px；
    will-change：过滤器；
}.elementor-nav-menu > li:nth-child(2) ul {
    宽度：300px！重要；
    边距顶部：55px！重要；
    背景颜色：#ef6500！重要；
}

.elementor-nav-menu > li:nth-child(3) ul {
    宽度：300px！重要；
    背景颜色：#e8b736！重要；
    顶部边距：13px！重要；
}

.elementor-nav-menu > li:nth-child(4) ul {
    宽度：300px！重要；
    边距顶部：55px！重要；
    背景颜色：#66cc9a！重要；
}

.elementor-nav-menu > li:nth-child(4) ul {
    宽度：300px！重要；
    顶部边距：50px！重要；
}

.elementor-nav-menu > li:nth-child(5) ul {
    宽度：300px！重要；
    顶部边距：25px！重要；
}

.elementor-子项目：悬停，
.elementor-sub-item.elementor-item-active {
    背景颜色：透明！重要；
    文本修饰：下划线！重要；
}</pre></p>

Answer 1

尝试添加

-webkit-appearance: none;