悬停引导导航栏间隙问题答案

【问题标题】：Hovering Bootstrap Navbar gap issue悬停引导导航栏间隙问题
【发布时间】：2019-07-22 07:51:27
【问题描述】：

我想要一个悬停导航栏，效果很好，但我想保持网站的风格。该网站的下拉菜单位于导航栏下方 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;
}

【问题讨论】：

标签： javascript html twitter-bootstrap sass

【解决方案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>

【讨论】：

【解决方案2】：

您如何删除margin-top 属性并将其变为padding-top:20px;。这将消除间隙并使下拉栏更宽敞。我不知道这是否是您想要的，我无法准确理解您的问题

【讨论】：

【解决方案3】：

仅使用 CSS 是不可能的。您还必须编写小 java 脚本。您可以在焦点事件上编写并更改下拉菜单的 css。然后从菜单元素中写入点击事件，然后隐藏。这样我们就可以解决这个问题。如果您真的希望菜单链接和下拉菜单之间有空间，请避免使用悬停使其单击。

【讨论】：