Html 下拉菜单消失前的延迟

我已经使用CSS和HTML创建了一个下拉菜单。鼠标悬停时将出现下拉菜单

我希望鼠标悬停1秒钟后下拉菜单消失。为此，我尝试添加

transition: display 1s;

进入

。下拉：悬停。下拉列表，。下拉列表：悬停

，但它不做任何事情

我的代码：

*{
保证金：0；
填充：0；
}
标题{
位置：固定；
高度：35px；
宽度：100%；
背景：黑色；
}
.顶部容器{
边缘顶部：7px；
}
/*下拉列表的代码*/
.下拉列表{
左边距：100px；
显示：内联块；
颜色：#FFF；
}
.下拉列表：悬停{
文本阴影：0px 4px 7px白色；
}
.下拉列表：悬停。下拉列表，
.下拉列表：悬停{
显示：块；
最高：100%；
转换：显示1s；/*不工作*/
}
.下拉列表{
列表样式：无；
显示：无；
位置：绝对位置；
颜色：红色；
宽度：100px；
}
.下拉列表{
背景：黄色；
}
李{
边框：1px纯黑；
}

下拉列表❱；

项目1
项目2
项目3

转换仅适用于具有数值的属性。显示使用离散值，因此无法接收任何过渡效果

仅使用CSS，您就可以使用

top

或类似属性来“隐藏”下拉菜单（）

---

转换不支持显示属性。相反，我会坚持使用

height:0px至<代码>高度：xx px用于转换效果。@divy3993正常。你能告诉我为什么也失败了吗？谢谢@Ryan强调了这一重要条件，以便过渡到工作状态，即只在具有数值的属性上工作
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
    top: 100%;
    transition: none;
}
.dropdown_list {
    top: -10000%;
    display: block;
    transition: top 1s step-end;
}