Question

我想要一个悬浮的导航栏，它可以正常工作，但是我想保持网站的风格。该网站的下拉菜单在导航栏下方20像素，当您将鼠标悬停在导航栏上并转到隐藏的下拉菜单时。看起来类似于：

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

.dropdown-menu{
  margin-top:20px;
}

Answer 1

您可以使用内部<div>元素将菜单项下推，尝试以下解决方案。我还建议您使用其他类进行自定义（在这种情况下为.custom-dropdown），以便您仅更改自定义下拉菜单，而不更改身边所有的下拉菜单元素。

html, body {
  background: #ccc;
}
.custom-dropdown.dropdown:hover > .dropdown-menu {
  display: block;
  margin: 0;
  background: transparent;
}

.custom-dropdown.dropdown > .dropdown-toggle:active {
  /** without this, clicking will make it sticky. */
  pointer-events: none;
}

.custom-dropdown .dropdown-menu .inner-dropdown-menu {
  margin-top: 20px;
  padding: .5rem 0;
  background: white;
}

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="dropdown custom-dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
        <div class="dropdown-menu border-0" aria-labelledby="dropdownMenuButton">
          <div class="inner-dropdown-menu border rounded">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 2

如何删除margin-top属性并将其放入padding-top:20px;。这样可以消除差距，并使下拉菜单更加宽敞。我不知道那是不是你想要的，我无法准确地理解你的问题

Answer 3

仅CSS不可能。您还必须编写一些Java脚本。您可以编写焦点事件并更改下拉菜单的CSS。然后将click事件写出菜单元素，然后隐藏。这样我们可以解决这个问题。如果您确实想要菜单链接和下拉菜单之间的空间，请避免使用鼠标悬停按钮。

悬停Bootstrap Navbar间隙问题

3 个答案: