Question

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

我通过在下拉菜单中设置CREATE FUNCTION [dbo].[tvf-Str-Parse] (@String varchar(max),@Delimiter varchar(10)) Returns Table As Return ( Select RetSeq = row_number() over (order by 1/0) ,RetVal = ltrim(rtrim(B.i.value('(./text())[1]', 'varchar(max)'))) From ( values (cast('<x>' + replace((Select replace(@String,@Delimiter,'§§Split§§') as [*] For XML Path('')),'§§Split§§','</x><x>')+'</x>' as xml).query('.'))) as A(x) Cross Apply x.nodes('x') AS B(i) );并在下拉菜单类中设置position:initial;来管理全角功能。

问题在于，当设置width:100%;时，将鼠标悬停在该链接上以单击其中一个链接时，该下拉列表就会消失。

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

这是我尝试过的：

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

position:initial

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。

Answer 2

我想添加这个对 OP 没有帮助的答案，但可能对从 Google 来到这里的其他人有帮助。

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

问题最终是当转换元素的父元素设置为 display: inline; 时，Firefox 似乎不喜欢（实际上对我们来说这是一个 span，但同样的交易）。

为了解决我添加的问题：

span.dropdown {
    display: inline-block;
}

Bootstrap-悬停时下拉菜单消失

2 个答案: