下拉菜单消失前的延迟

Question

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

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

transition: display 1s;

进入 .dropdown:hover .dropdown_list, .dropdown_list:hover 但它什么也没做。

我的代码：

* {
    margin: 0;
    padding: 0;
}
header {
    position: fixed;
    height: 35px;
    width: 100%;
    background: black;
}
.top-container {
    margin-top: 7px;
}
/* Code for drop-down list */
 .dropdown {
    margin-left: 100px;
    display: inline-block;
    color: #FFF;
}
.dropdown:hover {
    text-shadow:0px 4px 7px white;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
    display: block;
    top:100%;
    
    transition: display 1s; /* Doesn't work */
}
.dropdown_list {
    list-style: none;
    display: none;
    position: absolute;
    color: red;
    width: 100px;
}
.dropdown_list li {
    background: yellow;
}
li {
    border: 1px solid black;
}

<body>
    <header>
        <div class="top-container">
            <div class="dropdown">Dropdown &#10097;
                <ul class="dropdown_list">
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                </ul>
            </div>
        </div>
    </header>
</body>

如何让悬停后下拉菜单延迟一秒消失？这可能没有任何 jQuery 或 Javascript 吗？

Answer 1

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

只需 CSS，您就可以使用 top 或与 'hide' 下拉菜单 (jsfiddle) 类似的属性。

.dropdown:hover .dropdown_list,
.dropdown_list:hover {
    top: 100%;
    transition: none;
}
.dropdown_list {
    top: -10000%;
    display: block;
    transition: top 1s step-end;
}

下拉菜单消失前的延迟

Delay before drop-down menu disappears

html

css

hover

drop-down-menu