Bootstrap-下拉菜单在悬停时消失得太快

Question

I have a bootstrap navbar and I have changed it so that the dropdown menu shows whenever one hovers over the menu items (instead of whenever one clicks). This works, but there is something off: The dropdown disappears very quickly and irregularly, it's not so easy to just hover and then click on something. I am not sure how to describe this but I think you will see what I mean, everything just seems a little bit too "quick".

Here is a jsfiddle: https://jsfiddle.net/r3sjgq2c/

Edit: I am talking about the menu in the large viewport, not about the small viewport!

Here is the code:

<div class="header container-fluid">

  <div class="row">
    <div class="brand col-sm-10 offset-sm-1 hidden-xs-down">
      <svg class="brand_logo"><use xlink:href="#brand_logo" /></svg>
    </div>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mx-auto">

      <li class="nav-item active">
        <a class="nav-link" href="index.php">Welcome<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Pricing
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdown_angebot">
          <a class="dropdown-item" href="softwareentwicklung.php">Action</a>
          <a class="dropdown-item" href="qualitaetssicherung.php">Another action</a>
        </div>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com">
          Our Company
        </a>

        <div class="dropdown-menu" >
          <a class="dropdown-item" href="geschichte.php">History</a>
          <a class="dropdown-item" href="karriere.php">Career</a>
          <a class="dropdown-item" href="klienten.php">Clients</a>
        </div>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="anfahrt.php">Get here<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="kontakt.php">Contact<span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>

  </div>
</div>

CSS:

.navbar-toggler{
  z-index: 999999 !important;
}

.header {
  background-color: blue;

  .navbar-toggler {
        margin-top: 20px !important;
  }

  .navbar {
    height: 50px !important;
    padding: 0 !important;
    background-color: yellow !important;

    .navbar-nav {
        display: table !important;
        width: 100% !important;
        list-style: none !important;

        .nav-link {
          padding: 0 !important;
        }

        li {
        display: table-cell !important;
        text-align: center !important;

          a {
            display: block !important;
            text-align: center !important;
          }

          &:first-child a {
              text-align: left !important;
          }
          &:last-child a {
              text-align: right !important;
          }



          &:hover .dropdown-menu, .dropdown-item:hover .dropdown-menu {
              display: block !important;
          }
          .dropdown-menu {
            // margin-top: 10px;
            left: 50% !important;
            transform: translateX(-50%) !important;
          }

        }
    }
  }
}

Answer 1

add this in your javascript file. also add include this jquery to top off your all js file

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js



$(function(){
    $(".dropdown").hover(            
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
                $(this).toggleClass('open');
                $('b', this).toggleClass("caret caret-up");                
            },
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
                $(this).toggleClass('open');
                $('b', this).toggleClass("caret caret-up");                
            });
    });