Javascript 导航栏下拉菜单不显示

我的网页设计师遇到了导航栏显示不正确的问题。当将鼠标悬停在带有

下拉列表项的项上时，下拉列表应显示在div中列出的项上。相反，块只显示没有项的项。navbar是一个React.JS组件，它在父容器中呈现。我在下面列出了他的html和css

编辑：当前结果的屏幕截图。它显示在悬停状态，但不在列表中应有的下方

编辑2：它可以在纯HTML和CSS中工作，但不能在反应和CSS中工作



html{
字体系列：无衬线；
}
/*div{
背景：白色；
}*/
/*********导航栏部分**********/
navbar先生{
溢出：隐藏；
背景色：#B597C3；
}
/*导航栏内的链接*/
李国宝先生{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：.625em；
文字装饰：无；
字号：17px；
}
/*悬停链接的颜色*/
.navbar a:悬停{
颜色：#ffffff；
文字装饰：下划线；
}
.导航栏a.激活{
文字装饰：下划线；
}
/*下拉项*/
.下拉列表{
浮动：左；
字号：1.0625em；
颜色：白色；
边界：无；
光标：指针；
溢出：隐藏；
}
.下拉列表{
显示：内联块；
}
.下拉列表项{
位置：绝对位置；
显示：无；
保证金：0；
最小宽度：10em；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉列表项a{
颜色：白色；
填充：12px 50px；
文字装饰：无；
显示：块；
}
.下拉列表：悬停。下拉列表项{
显示：块；
}




关于
政策
如何出租
接触

它正在出现，但链接颜色为白色。你的页面背景是白色的吗？是的，但是在页面上，它本身并不是这样出现的，让我发布一个屏幕截图。您缺少将使代码看起来像屏幕截图的
.navbar
父项。为您编辑。我以前的评论仍然有效。菜单可以工作，但在白色背景上看不到白色文本。