웹사이트를 구축했는데 Safari에서 메뉴가 이상하게 작동합니다. 문제를 보여주는 아래 비디오를 확인하십시오. 이 문제는 Safari 브라우저에서만 발생하며 다른 브라우저에서는 문제가 없습니다.

Safari의 문제에 대한 동영상은 https://vimeo.com/757367403

이것은 내 CSS입니다. 이 문제를 해결할 수 있는 방법을 아는 사람이 있나요?

@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; -웹킷-국경-반경: 70px; 테두리 반경: 50%; 배경 크기: 표지; 배경 반복: 없음; 너비:139px; 높이:139px; 텍스트 정렬:가운데; 여백:0 10px!중요; 디스플레이: 플렉스; /* 또는 인라인 플렉스 */ 항목 정렬: 중앙; 내용 정당화: 센터; 필터: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.75)); } .elementor-nav-menu > 리 아 { 색상:#fff!중요; 글꼴 크기: 18px!중요; word-wrap: break-word!important; 단어 중단: 중단 단어!중요; 공백: 일반!중요; 줄 높이:26px; 텍스트 정렬:가운데; } .elementor-nav-menu > 리 a:hover { 줄 높이:30px; } .elementor-nav-menu li a .sub-arrow { 표시:없음; } .elementor-nav-menu > .sub-menu:nth-child(3) { 배경색:빨간색; } .elementor-nav-menu--드롭다운 li a { 내용 정당화: 센터; } .elementor-nav-menu--dropdown { -웹킷-국경-반경: 15px; -moz-국경-반경: 15px; 테두리 반경: 15px; 변경 예정: 필터; }.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-sub-item:hover, .elementor-sub-item.elementor-item-active { 배경색: 투명!중요; 텍스트 장식: 밑줄!중요; }