Html 转换不适用于下拉列表

我正在尝试将转换应用于我的下拉列表，但它不起作用。鼠标悬停后会出现下拉列表，效果不可见

。下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充：12px 16px；
z指数：1；
转换：translateY（-170px）；
过渡：所有1；
}
.下拉列表：悬停>.下拉列表内容{
显示：块；
背景颜色：黄绿色；
变换：translateY（20px）；
}

可悬停下拉列表
将鼠标移到下面的文本上以打开下拉内容

你好，世界

老鼠在我身上

显示

属性不可设置动画。您可以改为设置

不透明度的动画。

您可以将
显示
默认为
块



.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：块；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充：12px 16px；
z指数：1；
不透明度：0；
转换：translateY（-170px）；
过渡：所有1；
}
.下拉列表：悬停>.下拉列表内容{
不透明度：1；
背景颜色：黄绿色；
变换：translateY（20px）；
}
悬停式下拉菜单
将鼠标移到下面的文本上以打开下拉内容

你好，世界

老鼠在我身上
无法设置显示属性的动画。请尝试设置不透明度的动画。我正在尝试设置变换的动画。默认设置为
display:none
，悬停时设置为
display:block
，这样可以防止任何其他动画。不客气。