Html 下拉菜单淡入，但不会'；不褪色

我已经用HTML和CSS编写了一个下拉菜单，当用户的鼠标悬停在菜单中的按钮上时，我可以成功地让它淡入。但是，当鼠标离开下拉列表时，下拉列表不会消失，只是消失了？我相信这是一个语法错误，但我不知道在哪里。我怎样才能让下拉列表像我让它淡入一样淡出

。顶块容器{
浮动：左；
宽度：50%；
利润率：0.5%0.25%；
}
.顶部块容器：悬停。顶部块下拉列表{
能见度：可见；
不透明度：1；
变换：translateY（0）；
高度：自动；
}
.顶块{
宽度：100%；
字体系列：Lato；
字号：900；
文本对齐：居中；
填充：10px0；
边界半径：50px；
字体大小：25px；
过渡：背景色0.25s线性，框影0.25s线性；
浮动：左；
背景：线性梯度（至底部，#CCCCCC，#AAAAA）；
长方体阴影：0 5px黑色；
保证金：0；
}
.顶块：悬停{
光标：指针；
盒影：0 15px黑色；
}
.顶部块下拉列表{
宽度：100%；
背景：线性梯度（至底部，#CCCCCC，#AAAAA）；
浮动：左；
利润上限：7.5px；
边界半径：25px；
盒影：0 15px黑色；
可见性：隐藏；
不透明度：0；
身高：0；
变换：translateY（-2em）；
过渡：可见性0s，变换0.25s，不透明度0.25s线性；
}
.下拉选项标题{
字体系列：Lato；
字号：700；
保证金：5px0；
填充物：5px10px；
底部边框：2件纯白；
}
.下拉选项{
字体系列：Lato；
字体大小：400；
文本对齐：居中；
边框底部：1px纯白；
保证金：0；
填充物：5px10px；
过渡：框阴影0.25s线性；
}
.下拉选项：悬停{
背景：线性梯度（至顶部，道奇蓝，#00B0FF）；
光标：指针；
}
.最后选择{
边界：0；
边框左下半径：25px；
边框右下半径：25px；
}

ECWMF
全局模型
GFS
ECMWF

CMC
NAVGEM
UKMET
中尺度模型

HRRR
HWRF

NAM 32km
NAM 12公里
RAP
SREF
雇佣员工

您的CSS转换表示div的可见性将在零秒内改变：

.top-block-dropdown { transition: visibility 0s ... }

---

因此，div立即消失。您只需要更长的转换时间。

因为您的转换具有

可见性0s

。将该值设为非零值，然后可见性转换。或者从所有这些定义中删除

可见性

<代码>不透明度就足够了

。顶块容器{
浮动：左；
宽度：50%；
利润率：0.5%0.25%；
}
.顶部块容器：悬停。顶部块下拉列表{
不透明度：1；
变换：translateY（0）；
高度：自动；
}
.顶块{
宽度：100%；
字体系列：Lato；
字号：900；
文本对齐：居中；
填充：10px0；
边界半径：50px；
字体大小：25px；
过渡：背景色0.25s线性，框影0.25s线性；
浮动：左；
背景：线性梯度（至底部，#CCCCCC，#AAAAA）；
长方体阴影：0 5px黑色；
保证金：0；
}
.顶块：悬停{
光标：指针；
盒影：0 15px黑色；
}
.顶部块下拉列表{
宽度：100%；
背景：线性梯度（至底部，#CCCCCC，#AAAAA）；
利润上限：7.5px；
边界半径：25px；
盒影：0 15px黑色；
不透明度：0；
身高：0；
变换：translateY（-2em）；
过渡：变换0.25s，不透明度0.25s线性；
}
.下拉选项标题{
字体系列：Lato；
字号：700；
保证金：5px0；
填充物：5px10px；
底部边框：2件纯白；
}
.下拉选项{
字体系列：Lato；
字体大小：400；
文本对齐：居中；
边框底部：1px纯白；
保证金：0；
填充物：5px10px；
过渡：框阴影0.25s线性；
}
.下拉选项：悬停{
背景：线性梯度（至顶部，道奇蓝，#00B0FF）；
光标：指针；
}
.最后选择{
边界：0；
边框左下半径：25px；
边框右下半径：25px；
}

ECWMF
全局模型
GFS
ECMWF

CMC
NAVGEM
UKMET
中尺度模型

HRRR
HWRF

NAM 32km
NAM 12公里
RAP
SREF
雇佣员工

因为您的转换具有

可见性0s

。将该值设为非零值，然后可见性转换。或者从所有这些定义中删除

可见性

<代码>不透明度就足够了。非常感谢，我还删除了

高度：0也来自css，它可以完美地工作。