Bootstrap - 悬停时下拉菜单消失

Question

我正在使用来自w3schools 的导航栏示例。我希望导航栏下拉菜单是页面的整个宽度，并在悬停时显示下拉菜单。

我通过在下拉类中设置position:initial; 并在下拉菜单类中设置width:100%; 来管理全角功能。

问题是，当设置position:initial 时，当您将鼠标悬停在下拉菜单上单击其中一个链接时，它就会消失。

关于如何解决此问题的任何建议？

这是我尝试过的：

1. 将下拉菜单类设置为 display:none，将下拉菜单类设置为 display:block。
2. 确保设置为 display:none 的类高于具有 display:block 的类（根据此处的答案：css hover drop down menu disappears when trying to select menu option）
3. 删除了导航栏和导航栏元素周围的所有填充（根据这里的问题：Dropdown menu on hover dissapears (using bootstrap)）
4. 将列表元素设置为 display:block on hover 这样他们就会看到有悬停并且下拉菜单不会消失。
5. 尝试了不同的浏览器。 Chrome 和 FireFox 中存在同样的问题。

.navbar {
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    padding-bottom:0 !important;
    padding-left:8vw !important;
    padding-right:8vw !important;
}

.nav a{
    color:#000000 !important;
    padding-bottom:0px !important;

}
.dropdown-menu {
    border-radius: 0px !important;
    border: solid !important;
    border-width: 1px !important;
    border-color: lightgray !important;
    border-radius: 0  !important;
    -webkit-box-shadow: none  !important;
    box-shadow: none  !important;
    text-align:left !important;
    padding-left: 1vw !important;
    padding-right: 1vw !important;
    padding-top:2vw !important;
    padding-bottom:1vw !important;
    display: none  !important;
    width:100%  !important;
}

.dropdown{
    position:initial  !important;
  display: block  !important;
}
.dropdown-menu:hover{
  top:0  !important;
}

.dropdown-menu>ul>li:hover{
  display: block  !important;
}

.dropdown:hover .dropdown-menu {
  display: block  !important;
  margin-top: 0  !important;
}

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle"  href="#">Page 1
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Answer 1

你只需要一点 css：

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>

点击Run Code Snippet按钮最右边的Full Page，确保全屏查看StackSnippet

Answer 2

我想添加这个对 OP 没有帮助的答案，但可能对从谷歌登陆这里的其他人有所帮助。

对于我们来说，Bootstrap 4 下拉菜单项只会在 Firefox 中悬停时消失。看看这个疯狂的行为：

问题最终是 Firefox 似乎不喜欢将转换元素的父级设置为 display: inline;（实际上它对我们来说是 span，但同样处理）。

为了解决我添加的问题：

span.dropdown {
    display: inline-block;
}