html - 悬停时下拉菜单关闭太快

Question

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

 <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

标签： htmlcssbootstrap-4hover

Answer 1

CSS：

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