Question

https://www.dropbox.com/s/aqr0444isul1rky/Screenshot%202014-09-23%2022.06.49.png?dl=0

上面是标题中关于我们下拉列表的图片。当我点击它时，下面的内容目前优先于下拉菜单内容。

情况应该不是这样，但确实如此。下面是我点击它时的样子图片：

https://www.dropbox.com/s/5ud446l7hpz7veg/Screenshot%202014-09-23%2022.08.15.png?dl=0

正如您所看到的那样，它是白色的，下面的内容是从显示中覆盖它。有一点空白，但它没有占用应有的空间。

我搜索了SO / Google，大多数答案都说要添加更高的z-index。我试过这个并没有用。

这是标题的当前CSS（非引导但它可以工作），它正确显示内容：

#nav > li > ul {
position: absolute;
border: 5px solid #008553;
border-width: 5px 0px 6px;
padding: 27px 26px 30px 26px;
left: -9999em;
top: 35px;
width: 908px;
background: #f1f7f4;
z-index: 500;
-webkit-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
-moz-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
}

可以解决这个问题的方法是什么？来自wordpress网站还有其他CSS - 我怎么能告诉下拉菜单优先占用这个空间呢？

Answer 1

试试这个

.navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu {
      position: absolute;
      border: 5px solid #008553;
      border-width: 5px 0px 6px;
      padding: 27px 26px 30px 26px;
      left: -9999em;
      top: 35px;
      width: 908px;
      background: #f1f7f4;
      z-index: 500;
      -webkit-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
      -moz-box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
      box-shadow: 0px 3px 3px 0px rgba(30, 30, 30, 0.3);
}

以下内容涵盖的Bootstrap下拉菜单内容：

1 个答案: