IE7上的Bootstrap菜单重叠

Question

我正在使用Bootstrap和html5shiv.js组建一个站点。

我有两个“导航栏”div，一个在屏幕上方。在Chrome，Firefox和IE9中，它们外观和工作正常。在IE7和IE8上（或者更确切地说，IE8模式下的IE9），顶部的下拉菜单显示在它下面的导航栏的部分后面。在这张图片中，顶部的“概述”有一个带有三个项目的下拉列表（“人”，“RSS”，“Wiki”）及其下方的导航栏有一个项目“2013-01 rev”，它是一个下拉列表，通过Overview下拉面板显示，第二个活动项目“Step 1 - 人们“在下拉小组面前显示。

我使用IE9开发人员工具进行了检查，它在下拉列表面板上显示了z-index（“RSS”和“Wiki”的部分为1000，并且下面的部分没有z-index。我已经尝试在它下面的那个上放一个z-index，它没有帮助。

由于jsfiddle似乎不能在IE7上运行，我在http://xen1.xcski.com/tmp/ie7_problem.html上制作了一小部分页面，证明了这个问题。

Answer 1

尝试在顶部导航中添加正z-index值（即带有Overview，Cart，Access Review等的导航值）。

<div id="top-bar" class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav" style="z-index:1;">...</ul>
    </div>
  </div>
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">...</ul>
    </div>
  </div>
</div>