Bootstrap-悬停时下拉菜单消失

时间:2019-06-15 21:35:24

标签: html css twitter-bootstrap

我正在玩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%;时,将鼠标悬停在该链接上以单击其中一个链接时,该下拉列表就会消失。

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

这是我尝试过的:

  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. 将列表元素设置为在悬停时显示:block,这样他们就会看到有悬停并且下拉菜单不会消失。
  5. 尝试了不同的浏览器。 Chrome和FireFox中存在相同的问题。
position:initial

2 个答案:

答案 0 :(得分:0)

您只需要以下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。

答案 1 :(得分:0)

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

对我们来说,Bootstrap 4 下拉菜单项只会在 Firefox 中悬停时消失。看看这个疯狂的行为: Firefox dropdown items disappearing on hover

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

为了解决我添加的问题:

span.dropdown {
    display: inline-block;
}