Bootstrap下拉菜單內容包含在以下內容中：

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);
}