Bootstrap 4 下拉菜单在导航栏下方弹出

Question

I am using Bootstrap 4 and have implemented a navbar with a drop-down menu. However, I want to have the drop-down menu just below the navbar and not somewhere below the drop-down link. So, I have changed the attribute top from 100% to a custom value in order to have the drop-down menu a little further pushed down (align it the end of the navbar - so, just below the navbar). Maybe you guys have a better solution to do this instead of entering a custom value.

Because of this change, my menu is disappearing every time I want to swipe with the courser from the menu link to the drop-down menu because my menu is only showing on hover and not on click! It is disappearing because the mouse is not within the drop-down menu anymore as you can see in those two images. Any suggestions on how to fix this?

My navbar so far ( in order to see the problem you have to see the desktop version! ):

 .navbar-brand p { width: auto; max-width: 170px; height: 47px; } .navbar { padding: .25rem 1rem; } .nav-item { padding: 0px 10px; } .navbar .nav-item:first-child { padding-left: 0px; } .nav-item:last-child { padding-right: 0px; } .burger-menu { justify-content: right; } .dropdown-menu { left: unset !important; min-width: 300px !important; top: 3.1rem !important; } .dropdown:hover > .dropdown-menu { display: block; } .dropdown > .dropdown-toggle:active { pointer-events: none; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-white"> <div class="container"> <div class="d-flex flex-grow-1"> <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span> <a class="navbar-brand" href="#"> <p>My Image</p> </a> <div class="w-100 d-flex burger-menu"> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#myNavbar7" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button> </div> </div> <div class="navbar-collapse flex-grow-1 collapse" id="myNavbar7" style=""> <ul class="navbar-nav ml-auto flex-nowrap"> <li class="nav-item"> <a href="#" class="nav-link">Link1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link3</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Menu</a> <div class="dropdown-menu"> <div class="row"> <div class="col-xl-12"> <a href="" class="nav-link">All Categories</a> </div> <div class="col-xl-6"> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> </div> <div class="col-xl-6"> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> </div> </div> </div> </li> <li class="nav-item"> <form> <div class="input-group"> <input type="text" class="form-control border border-right-0" placeholder="Search..."> <span class="input-group-append"> <button class="btn btn-outline-dark border border-left-0" type="button"> <i class="fa fa-search"></i> </button> </span> </div> </form> </li> <li class="nav-item"> <a href="#" class="btn btn-secondary">Login</a> </li> <li class="nav-item"> <a href="#" class="btn btn-primary">Register</a> </li> </ul> </div> </div> </nav>

Answer 1

this is js way:

https://codepen.io/shahry4r/pen/eYmzErm

if dont want use js you must put dd in end of menu link:

.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: -10px;
}

if this is ok add some custom class to dropdown and after that override the class

this is put dropdown where the menu areas end and drop down appears on menu hover

Answer 2

You have to remove padding from .navbar and margin-top from .dropdown-menu But if you are trying to make hover effect, do it only for desktop size. Use media query like this

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{ color: #fff;  }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}   
/* ============ desktop view .end// ============ */

Here is detailed tutorial about bootstrap navbars: https://bootstrap-menu.com/detail-basic-hover.html