Javascript 下拉菜单显示不可见的子框，但仅在将鼠标悬停在子框上时显示子文本

我正在创建一个下拉菜单，当鼠标悬停在上面时，它会显示子链接

但是，我遇到了一个问题，当我在下拉菜单上悬停时，它会显示一个空白框，并且只在悬停在上面时显示文本

我希望文本始终显示

//粘性导航栏
var h=document.getElementById（“navbar”）；
var=false；
var stickPoint=getDistance（）；
函数getDistance（）{
var topDist=h.offsetTop；
返回顶端距离；
}
window.onscroll=函数（e）{
var distance=getDistance（）-window.pageYOffset；
var offset=window.pageYOffset；
如果（（距离0）{
preload.style.opacity-=0.1；
}否则{
清除间隔（fadeEffect）；
}
}, 200);
window.addEventListener（'load'，fadeEffect）
/*导航栏*/
#导航栏{
高度：75px；
显示：块；
背景：#333；
宽度：100%；
}
#导航栏a{
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
填充顶部：10px；
文本对齐：居中；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
#导航栏a:悬停，.dropdown:悬停.dropbtn{
背景颜色：银色；
颜色：黑色；
}
.下拉内容{
显示：无；
位置：绝对位置；
左边缘：49%；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
显示：内联块；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.下拉：悬停.下拉内容{
显示：块；
}

项目
正如@Y.S.指出的，您的颜色设置为白色。我不确定你尝试过什么不起作用，这对我来说很好：


//粘性导航栏
var h=document.getElementById（“navbar”）；
var=false；
var stickPoint=getDistance（）；
函数getDistance（）{
var topDist=h.offsetTop；
返回顶端距离；
}
window.onscroll=函数（e）{
var distance=getDistance（）-window.pageYOffset；
var offset=window.pageYOffset；
如果（（距离{
//如果我们不在CSS中设置不透明度1，那么//它将等于“”，这就是为什么我们//检查它
如果（！preload.style.opacity）{
preload.style.opacity=1；
}
如果（preload.style.opacity>0）{
preload.style.opacity-=0.1；
}否则{
清除间隔（fadeEffect）；
}
}, 200);
}
window.addEventListener（'load'，fadeEffect）；
/*导航栏*/
#导航栏{
高度：75px；
显示：块；
背景：#333；
宽度：100%；
}
#导航栏a{
字体大小：16px；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
填充顶部：10px；
文本对齐：居中；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
#导航栏a:悬停，.dropdown:悬停.dropbtn{
背景颜色：银色；
颜色：黑色；
}
.下拉内容{
显示：无；
位置：绝对位置；
左边缘：49%；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
显示：内联块；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.下拉：悬停.下拉内容{
显示：块；
}

项目
#navbar a{color:white}
。链接颜色设置为白色。我已经尝试过了，但它不起作用。我认为我的粘性navbar JS代码会产生这些问题，因为在删除JS代码时，下拉菜单工作正常。我想我现在必须使用JQuery而不是Vanilla JS来实现粘性navbar。无论如何，谢谢。