Question

我正在使用bootstrap 3，当用户将鼠标悬停在链接上时，我正在尝试显示水平弹出菜单：

<div class="dropdown">
  <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="md-extension"></span>
  </a>
  <ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<style>
  .abcdef li {
      float: left;
  }

  #dropdownMenu1:hover + ul.dropdown-menu, ul.dropdown-menu:hover, ul.dropdown-menu li:hover  {
      display: block;
  }
</style>

当我将鼠标悬停在链接上时，弹出菜单会水平显示。但是，当我尝试将鼠标悬停在其中一个列表项上时，菜单会消失。我希望菜单保持打开状态，以便用户点击其中一个项目。

我“显示：阻止”用于悬停各种元素的下拉列表，但菜单仍未保持打开状态。

Answer 1

以下是仅限CSS的解决方案。工作原理：首先将悬停连接到.dropdown div而不是链接本身，然后使用伪类在链接和下拉菜单之间创建一个不可见的空格。

.dropdown:after {
      content: "";
      position: absolute;  
      bottom: -10px;
      height: 10px;
      width: 100%;
      left: 0;
      display: block;
}

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

Example

Answer 2

像@sherif说的那样。 Javascript是你的朋友。示例：http://jsfiddle.net/scn9p2gu/2/

HTML：

<div class="dropdown">
  <a class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="md-extension">hello</span>
  </a>
  <ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

CSS：

.abcdef li {
      float: left;
  }

.theclass {
    display: block;
}

JS：

$("#dropdownMenu1").hover(
    function() {
            $("ul.dropdown-menu").addClass("theclass");
            $("#dropdownMenu1").addClass("theclass");
            setTimeout(function(){ 
                $("ul.dropdown-menu").removeClass("theclass");
                $("#dropdownMenu1").removeClass("theclass"); 
            }, 3000);
    }
);

Answer 3

如果你想要...... DEMO

，你可以使用js来实现这一点

{{1}}

将鼠标悬停在链接上时保持打开状态

3 个答案: