html - Bootstrap 导航栏下拉菜单在非悬停时触发

Question

在我正在构建的“stumbleupon-esk”网站中，我在 iframe 之前使用 Bootstrap(带有平面 UI)navbar。我试图让 navbar 有一个固定的位置，但是当我这样做时，当我将鼠标悬停在下拉菜单将出现的位置而不是链接/列表项本身时，下拉菜单会被触发。

Report 下拉菜单是在我将鼠标悬停在其下方而非其上时触发的。

这是我的 HTML 的结构(在 HAML 中):

.navbar.navbar-inverse
  .navbar-inner
    .nav-collapse.collapse
      %ul.nav.pull-left
        %li.dropdown
          %a(href="#")
            %span Report
            %b.caret
          %ul
            %li
              %a#not-startup(href="#" rel="nofollow") Not Startup
              %a#broken-page(href="#" rel="nofollow") Broken Page
              %a#malicious(href="#" rel="nofollow") Malicious
              %a#inappropriate-content(href="#" rel="nofollow") Inappropriate Content
              %a#other(href="#" rel="nofollow") Other
%iframe{:src => ...}

还有 CSS:

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.navbar {
  margin-bottom: 0;
  position: fixed; 
  width: 100%;
}
.navbar-inner {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

我该如何解决这个问题？

编辑:

它在没有固定定位的情况下工作正常。

Answer 1

我遇到了同样的问题并发现了这个。

https://github.com/iurevych/Flat-UI/commit/423bef715f56c66c4905f1e7155128b360dfc5af

https://github.com/iurevych/Flat-UI/issues/1

看起来它是由显示问题引起的。如果您将 display:none; 添加到 .navbar .nav ul，它将在不缓和悬停效果的情况下工作。