Javascript CSS-下拉菜单鼠标悬停时背景透明，但我希望动画开始时使用不透明的颜色

我是CSS的新手，我已经设置了一个下拉菜单。悬停时，下拉菜单具有透明背景。如何在动画开始时使用不透明的颜色制作背景？我尝试过几种配置，但都不起作用：到目前为止，我的下拉菜单在下拉时有一个透明的背景

更新：好的，现在的悬停从一开始就是不透明的，但是文本的淡出仍然有一个滞后。到目前为止，文本仍保留在下拉菜单后，然后残酷地消失。也许有人有办法解决这个问题？

这里是我的代码沙盒：您将看到透明颜色有点滞后，然后是不透明度。我会从乞丐那里得到不透明

从“React”导入React
从“/Menu.module.css”导入样式；
导出默认值（道具）=>{
返回(
当前链接
下拉列表
公文包{props.Portfolio}
Blog{props.Blog}
Prestations{props.Prestations}
关于我们{props.aboutus}
联系人{props.Contact}
)
}

/*菜单*/
.菜单{
左边距：15%；
边缘顶部：-0.5em；
过渡：宽度2s；
}
/*容器-需要定位下拉内容*/
.菜单容器{
位置：相对位置；
显示：内联块；
}
/*下拉按钮*/
.menu\u容器。menu\u按钮{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.menu\u容器：悬停.menu\u按钮{
背景色：#3e8e41；}
/*下拉内容（默认情况下隐藏）*/
.菜单内容{
/*显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1*/
可见性：隐藏；/*隐藏子菜单*/
不透明度：0；
位置：绝对位置；
最高：100%；
左：0；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
/*使内容物比容器高2米*/
变换：translateY（-2em）；
z指数：-1；
过渡：所有0.3缓进0缓出0，可见性0线性0.3，z指数0线性0.01；
}
/*悬停时显示下拉菜单*/
.menu\u容器：悬停.menu\u内容{
/*显示：块*/
可见性：可见；/*显示子菜单*/
背景色：白色；
不透明度：1；
z指数：1；
转化：translateY（0%）；
转换延迟：0s、0s、0.3s；}
/*下拉列表中的链接*/
.菜单内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.menu_uucontent a:hover{background color:white；}

Z索引的转换正在影响它。你可以想象div慢慢地，一点一点地走在文本前面

我认为这个代码笔可能有助于解释这一点

您能否在例如中创建一个？你的代码不会生成透明背景，我认为你遗漏了一些东西，透明背景会通过不透明度或rgba生成，请检查这两个properties@Tholle：好的，这里是我的代码沙盒：。@Charan我想创建一个不透明的背景，从dropping@Webman伟大的背景对我来说是橙色的。您的意思是希望它立即变成橙色，而不是从透明过渡到橙色？

<div class="wall wall-1"></div>
<div class="wall wall-2"></div>
<div class="wall wall-3"></div>