这个问题我之前也碰到过，核心是要区分移入和移出两种状态的过渡逻辑——你原来的代码只在hover状态下设置了transition-delay，但当鼠标移出时，这个hover规则就失效了，自然没法触发延迟隐藏的效果。而且要注意，必须保证鼠标从主菜单移到子菜单时，主菜单的hover状态不会中断，这样才不会误触发隐藏逻辑。

正确的实现思路 #

我们需要给子菜单设置默认的移出延迟规则，然后在主菜单hover时覆盖这个规则，让移入时立即显示，移出时等待指定时间再隐藏。这里要配合opacity和visibility来实现（display: none没法做过渡动画）：

/* 子菜单默认状态：设置移出延迟 */
.menu-block_item-submenu {
  /* 过渡规则：opacity过渡0.5s，延迟1s执行；visibility在1.5s后隐藏 */
  transition: opacity 0.5s 1s, visibility 0s 1.5s;
  opacity: 0;
  visibility: hidden;
  /* 加上定位确保子菜单在主菜单下方 */
  position: absolute;
  top: 100%;
  left: 0;
}

/* 主菜单hover时：立即显示子菜单，取消延迟 */
.menu-block_item:hover .menu-block_item-submenu {
  transition: opacity 0.5s 0s, visibility 0s 0s;
  opacity: 1;
  visibility: visible;
}

/* 主菜单需要相对定位，让子菜单的绝对定位基于它 */
.menu-block_item {
  position: relative;
  display: inline-block;
  /* 可选：加上内边距让hover区域更大 */
  padding: 8px 16px;
}

关键细节解释 #

1. 为什么用visibility？
   单纯用opacity的话，元素虽然看不见，但依然占据空间且可以被鼠标触发，会干扰其他交互。visibility: hidden会让元素失去交互性，配合opacity实现视觉+功能上的完全隐藏。

2. 过渡时间的逻辑

   • 移出时，先等1秒再开始执行0.5秒的淡出动画，总共1.5秒后完全隐藏，给你足够时间从主菜单移到子菜单。
   • 移入时，立即取消所有延迟，让子菜单马上显示，保证交互的流畅性。

3. HTML结构要求
   必须保证子菜单是主菜单选项的直接子元素，这样鼠标在子菜单上时，主菜单的hover状态依然保持，不会触发默认的隐藏规则：

   <div class="menu-block_item">
     主导航选项
     <div class="menu-block_item-submenu">
       <a href="#">子菜单选项1</a>
       <a href="#">子菜单选项2</a>
     </div>
   </div>
   

这样设置后，当你从主菜单移向子菜单时，菜单不会消失；只有当鼠标完全离开主菜单和子菜单的区域时，才会等待1秒后隐藏，完美解决你的问题。

内容的提问来源于stack exchange，提问作者Outer