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

Question

我正在构建一个“stumbleupon-esk”网站navbar之前使用Bootstrap（带有平面UI）iframe。我试图让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，则无法缓解对悬停的影响。