下拉菜单消失前的延迟

我已经设法使用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吗?

过渡只适用于数值属性。显示使用离散值，因此无法接收任何过渡效果。

只要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;
}

相关内容

最新更新

热门标签：