悬停时下拉菜单关闭太快答案

【问题标题】：Dropdown Menu is closing too fast on hover悬停时下拉菜单关闭太快
【发布时间】：2019-08-14 21:38:03
【问题描述】：

我的下拉菜单在悬停时快速关闭，我无法触摸它，但单击时我的菜单保持打开状态。保证金是必要的。

 <div class="container mt-5 pt-5 ">
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="collapse navbar-collapse ">
  <ul class="navbar-nav">
   <li class="nav-item dropdown">
    <a class="nav-link text-danger" href="#" id="Dropdown" role="button" 
    data-toggle="dropdown">HOVER IT</a>
            <div  class="dropdown-menu  mt-5" aria-labelledby="Dropdown">
              <a class="dropdown-item" href="#">1</a>
              <a class="dropdown-item" href="#">2</a>
              <a class="dropdown-item" href="#">3</a>
            </div>
   </li>
  </ul>
 </div>
 </nav>
 </div>

  CSS:
 .navbar-nav li:hover > .dropdown-menu {
  display: block;
  transition-delay: 5s;
  }

https://codepen.io/booyr/pen/wvwMxvX

【问题讨论】：

您应该添加一个snippet 代码或将其放在codepen 中，这样每个人都可以看到您在做什么
请看一下，它现在在 codepen 上
您错过了正在转换的property，据我所知，您无法转换display: block;。悬停元素和子元素之间的间距也使其难以导航，看看tutorial on css tricks 或check the code
这对我没有帮助:(

标签： html css bootstrap-4 hover

【解决方案1】：

你需要使用 opacity: 0;visibility: hidden; 什么时候会悬停然后你需要添加 opacity:1;可见性：可见；..那么您的下拉菜单将缓慢显示和隐藏。

例如：

.navbar-nav li:hover > .dropdown-menu {
  opacity:1; visibility: visible;
  }
  
  .navbar-nav li > .dropdown-menu {
  opacity:0; visibility: hidden;
  transition-delay: 3s;
  }

谢谢。

【讨论】：

什么也没发生，下拉菜单完全消失了。方法不对，请再看一遍！
请移除 display: block。那么这将显示和隐藏缓慢..如果它解决了您的问题，请将其标记为答案..谢谢
我试试不显示：阻塞，什么也没发生！
这是有效的.. 你需要删除一些过渡。请设置transition: .3s;这个transition
请编辑您的答案并向我展示工作示例，我尝试了一切，但什么也没做。

【解决方案2】：

CSS：

.navbar-nav li:hover > .dropdown-menu {
    display: block;
    transition-delay: 5s; <----- Here you can change the speed of the menu quite simply
}

【讨论】：

是的，我知道，但它不适用于 display:block，我的意思是在这种情况下过渡延迟是无用的