Question

我确实通过添加一些CSS将点击上的Bootstrap 3下拉行为更改为悬停

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

它正在运作。子菜单包含2个<li>个标签，当悬停在第2个<li>下方时，子菜单将会消失。

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">Exhibitor <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Opportunities</a></li>
        <li><a href="#">Exhibitor List</a></li>
        <li><a href="#">Market Information</a></li>
        <li><a href="#">Floor Plan</a></li>
        <li><a href="#">Pricing</a></li>
    </ul>
</li>

我可以只悬停到<li><a href="#">Exhibitor List</a></li>。

当我到达<li><a href="#">Market Information</a></li>时，子菜单消失。

Answer 1

问题在于这个元素：

<body>
    […]
    <section style="position: absolute;left: 0;right: 0;top: 100px;z-index:4000;">[…]</section>
</body>

它是第三个元素周围菜单上方的隐形条纹。因为它有更高的z-index，所以当您将此元素悬停时，您将离开菜单。

PS：它是容纳链接参展商列表，平面图和机会的容器。

在第二个<li>之后，子菜单正在消失

1 个答案: