html - Bootstrap - 悬停时下拉菜单消失

Question

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

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

问题是，当设置 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>

确保全屏查看 StackSnippet，方法是单击 Run Code Snippet 按钮最右侧的 Full Page