I'm encountering an issue with my header drop-down menu in Safari—it works perfectly in Chrome, but when I try to open the drop-down menu in Safari, it's unresponsive. Clicking on it does nothing, preventing me from accessing other drop-downs. Have you faced a similar problem before? I've experimented with using both <a> tags and <span>, but there hasn't been any change.
Below is the snippet of my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
top: 0;
left: 0;
right: 0;
background: #ffffff;
padding: 0px 7%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10000;
.navbar ul {
list-style: none;
}
.navbar ul li {
position: relative;
float: left;
}
.navbar ul li a,
span {
padding: 20px;
color: #111d5e !important;
font-weight: 600;
text-decoration: none;
display: block;
}
.navbar ul li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
box-shadow: inset 3000px 0 0 0 #eed484;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.navbar ul li a:hover:after {
width: 100%;
left: 0;
}
.navbar ul li span:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
box-shadow: inset 3000px 0 0 0 #eed484;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.navbar ul li span:hover:after {
width: 100%;
left: 0;
}
.navbar ul li ul li span,
a {
width: 100%;
}
.navbar ul li ul {
position: absolute;
left: 0;
width: 250px;
background: #ffffff;
display: none;
align-items: flex
}
.navbar ul li ul li {
width: 100%;
}
// .navbar ul li:focus-within > ul,
.navbar ul li:hover>ul {
display: initial;
z-index: 100;
}
#menu-bar {
display: none;
}
label {
font-size: 20px;
color: #111d5e !important;
cursor: pointer;
display: none
}
.navbar ul li .language {
width: 155px;
}
}
@media (max-width: 991px) {
header {
padding: 15px;
}
header label {
display: initial;
}
header .navbar {
position: absolute;
top: 64px;
left: 0;
right: 0;
background: #ffffff;
display: none;
z-index: 99999;
}
header .navbar ul li {
width: 100%;
}
header .navbar ul li ul {
position: relative;
width: 100%;
}
header .navbar ul li ul li {
background: #ffffff
}
header .navbar ul li ul li ul {
width: 100%;
left: 0;
}
#menu-bar:checked~.navbar {
display: initial
}
header .navbar ul li .language {
width: 100%;
}
header .navbar ul a {
display: block;
width: 100%;
height: 100%;
}
}<header>
<img routerLink="" style="cursor: pointer" src="assets/logo.png" alt="">
<input type="checkbox" id="menu-bar">
<label for="menu-bar">{{'header.fifth' | translate}}</label>
<nav class="navbar">
<ul>
<li><a routerLink="">{{'header.first' | translate}}</a></li>
<li style="cursor: pointer;"><a>{{'header.second' | translate}} </a>
<ul style="cursor: pointer;">
<li><a style="cursor: pointer;" routerLink="/customs">{{'body.head-1' | translate}}</a></li>
<li><a style="cursor: pointer;" routerLink="/terrestrial">{{'body.head-2' | translate}}</a></li>
<li><a style="cursor: pointer;" routerLink="/ship">{{'body.head-3' | translate}}</a></li>
<li><a style="cursor: pointer;" routerLink="/train">{{ 'body.head-4' | translate}}</a></li>
</ul>
</li>
<li style="cursor: pointer;"><a>{{'header.fourth' | translate}}</a>
<ul class="language" style="float: left !important; cursor: pointer;">
<li><a (click)="setLang('ka')" style="cursor: pointer" class="dropdown-item">{{'language.first' | translate}}</a></li>
<li><a (click)="setLang('en')" style="cursor: pointer" class="dropdown-item">{{'language.second' | translate}}</a> </li>
<li><a (click)="setLang('ru')" style="cursor: pointer" class="dropdown-item">{{'language.third' | translate}}</a> </li>
</ul>
</li>
</ul>
</nav>
</header>