Javascript 为什么'；专注于'；不在Safari工作

我有一个网站，我为我的朋友开发的乐趣，我有麻烦与CSS。我遵循了一个关于主题改变的教程。我的问题是，当我点击safari上的主题时，我的下拉列表不会很好。。。下拉列表。（注：在任何其他浏览器上都可以正常工作）

//DOM元素
const darkButton=document.getElementById（“暗”）；
const lightButton=document.getElementById（“light”）；
const solarButton=document.getElementById（“太阳能”）；
const body=document.body；
//重新加载时应用缓存的主题
const theme=localStorage.getItem（“主题”）；
const-isSolar=localStorage.getItem（“isSolar”）；
如果（主题）{
body.classList.add（主题）；
isSolar&body.classList.add（“太阳能”）；
}
//按钮事件处理程序
darkButton.onclick=（）=>{
body.classList.replace（“亮”、“暗”）；
setItem（“主题”、“暗”）；
};
lightButton.onclick=（）=>{
body.classList.replace（“深色”、“浅色”）；
setItem（“主题”、“灯光”）；
};
solarButton.onclick=（）=>{
if（body.classList.contains（“太阳能”））{
body.classList.remove（“太阳能”）；
localStorage.removietem（“isSolar”）；
}否则{
body.classList.add（“太阳能”）；
setItem（“isSolar”，true）；
}
};
@导入url（“https://fonts.googleapis.com/css2?family=Poppins:wght@200；300；400；500&display=swap“；
* {
保证金：0；
填充：0；
框大小：边框框；
}
导航{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
高度：10vh；
背景：var（--bg nav）；
字体系列：“罂粟花”，无衬线；
}
.标志{
颜色：var（--text）；
文本转换：大写；
字母间距：5px；
字号：500；
字号:20 ;；
}
.导航链接{
对齐项目：居中；
显示器：flex；
证明内容：周围的空间；
宽度：50%；
}
.导航链接a{
文字装饰：无；
颜色：var（--text）；
字体大小：300；
字母间距：3px；
字体大小：14px；
}
.nav链接李{
列表样式：无；
}
.汉堡{
显示：无；
}
.汉堡部{
宽度：25px；
高度：2倍；
背景色：var（--汉堡色）；
利润率：6px；
过渡：所有0.3秒缓解；
}
.联系方式{
背景色：rgb（37192192）；
填充：8px 30px；
边界半径：25px；
颜色：var（--text）；
边界：无；
光标：指针；
字体大小：14px；
}
.联系人：悬停{
不透明度：0.8；
}
.下拉列表{
位置：绝对位置；
宽度：500px；
不透明度：0；
z指数：2；
背景：var（--bg下拉列表）；
边框顶部：2个实心变量（--边框颜色）；
边框右下半径：8px；
边框左下半径：8px；
显示器：flex；
显示：无；
对齐项目：居中；
证明内容：周围的空间；
高度：3雷姆；
最高保证金：1.22雷姆；
填充：0.5雷姆；
盒影：rgba（2,8,20,0.1）0px 0.175em 0.5em；
转化：translateX（-40%）；
过渡：不透明度0.15s缓和；
}
.hasDropdown：悬停。下拉{
显示器：flex；
不透明度：1；
指针事件：自动；
}
.下拉列表项目a{
宽度：100%；
身高：100%；
大小：0.7雷姆；
左侧填充：10px；
字体大小：粗体；
}
.下拉列表项a:：before{
内容：“；
边框：2px实心变量（--边框颜色）；
边界半径：50%；
宽度：2em；
高度：2em；
显示：内联块；
垂直对齐：中间对齐；
右边距：10px；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.导航链接{
宽度：60%；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
溢出x：隐藏；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：90vh；
顶部：10vh；
背景色：rgb（87,87,87）；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：50%；
转化：translateX（100%）；
过渡：0.4s轻松过渡；
z指数：1；
}
.nav链接李{
不透明度：0；
背景颜色：灰色；
填充：5px35px；
边界半径：10px；
}
.汉堡{
显示：块；
光标：指针；
}
}
@媒体屏幕和屏幕（最大宽度：450px）{
身体{
溢出x：隐藏；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：90vh；
顶部：10vh；
背景色：rgb（87,87,87）；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：100%；
转化：translateX（100%）；
过渡：0.4s轻松过渡；
}
.nav links li，
钮扣{
不透明度：0；
}
.汉堡{
显示：块；
光标：指针；
}
}
.导航激活{
转化：translateX（0%）；
}
@关键帧navLinkFade{
从{
不透明度：0；
转换：translateX（50px）；
}
到{
不透明度：1；
转换：translateX（0px）；
}
}
.toggle.line1{
变换：旋转（-45度）平移（-5px，6px）；
}
.toggle.line2{
不透明度：0；
}
.toggle.line3{
变换：旋转（45度）平移（-5px，-6px）；
}
：根{
--白色：#ffffff；
--灰色0:#F8；
--灰色1:#dbe1e8；
--灰色2:#b2becd；
--灰色3:#6c7983；
--灰色4:#454e56；
--灰色5:#2a2e35；
--灰色6:#12181b；
--黑色：#000000；
--蓝色：#0084a5；
--紫色:#a82dd1 ;；
--黄色：#fff565；
}
.光{
--bg:var（--gray3）；
--背景导航：线性梯度（向右，var（--gray1），var（--gray3））；
--bg下拉列表：var（--0）；
--文本：var（--gray6）；
--边框颜色：var（--蓝色）；
--bg太阳能：var（--黄色）；
--汉堡颜色：var（--黑色）；
}
.黑暗{
--bg:var（--5）；
--bg nav：线性梯度（向右，var（--gray5），var（--gray6））；
--bg下拉列表：var（--gray6）；
--文本：var（--0）；
--边框颜色：var（--紫色）；
--bg太阳能：var（--蓝色）；
--汉堡颜色：var（--白色）；
}
.太阳能{
--灰色0:#fbffd4；
--灰色1:#f7f8d0；
--灰色2:#b6f880；
--灰色3:#5ec72d
<li class="nav-item has-dropdown" tabindex="0" >

.has-dropdown:focus {
    outline: none;
}