[分享]css中怎么将下拉列表延迟1秒消失

CSS中可以通过 transition-delay 属性实现下拉列表延迟1秒消失。

首先，我们需要设置下拉列表的样式：

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
} 

在HTML中添加下拉列表：

<div class="dropdown">
  <button>下拉列表</button>
  <ul class="dropdown-menu">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div> 

然后，我们需要添加以下CSS代码：

.dropdown:hover .dropdown-menu {
  display: block;
  transition-delay: 1s;
}

.dropdown-menu:hover {
  display: block;
}

.dropdown-menu {
  transition: all .2s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
} 

当鼠标悬停在下拉列表按钮上时，下拉列表将显示，同时设置 transition-delay 属性为1秒，表示下拉列表延迟1秒后消失。

当鼠标悬停在下拉列表上时，下拉列表将保持显示，直到移开鼠标。

我们还需要设置下拉列表的过渡效果，包括过渡时间、过渡类型、透明度和可见性设置。

最后，我们使用 .dropdown:hover .dropdown-menu 选择器和 .dropdown-menu:hover 选择器分别设置下拉列表的显示和隐藏效果。