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

Answer 1

您需要使用 opacity：0;可见性：隐藏； ，当鼠标悬停时，您需要添加 opacity：1;可见性：可见； ..那么您的下拉菜单将缓慢显示和隐藏。

例如：

menuItem

谢谢。

Answer 2

CSS：

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

悬停时下拉菜单关闭太快

2 个答案: