下拉菜单消失前的延迟答案

【问题标题】：Delay before drop-down menu disappears下拉菜单消失前的延迟
【发布时间】：2016-01-09 00:34:01
【问题描述】：

我已经设法使用 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 这可能吗？

【问题讨论】：

Display 属性不受转换支持。相反，我会坚持让你使用 height:0px; 到 heigth:xx px; 来获得过渡效果。
@divy3993 好的。你能告诉我为什么this 也会失败吗？

标签： html css drop-down-menu hover

【解决方案1】：

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

只需 CSS，您就可以使用 top 或类似属性来“隐藏”下拉菜单 (jsfiddle)。

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

【讨论】：

感谢@Ryan 强调了过渡工作的重要条件，即仅适用于具有 Numerical 值的属性