2014-09-24 97 views
0

https://www.dropbox.com/s/aqr0444isul1rky/Screenshot%202014-09-23%2022.06.49.png?dl=0Bootstrap下拉菜單內容涵蓋內容如下:

以上是關於我們在標題下拉列表的圖片。當我點擊它時,下面的內容當前優先於下拉菜單內容。

這不應該是這樣,但它是。下面是什麼樣子的,當我點擊它的照片:

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 - 我怎麼能告訴下拉菜單優先佔用這個空間?

+1

你需要添加一些代碼,儘量讓http://jsfiddle.net/文件爲了更好地理解 – 2014-09-24 05:11:10

+0

遠太難用各種不同的CSS/HTML不幸的複製。 – asgwar12 2014-09-24 05:11:32

+0

另外@ RoySonasish的評論,你也可以使用http://www.bootply.com/new測試bootstrap的東西 – webeno 2014-09-24 05:13:54

回答

0

試試這個

.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); 
} 
+0

您是否看到我的編輯? – asgwar12 2014-09-24 05:26:12

+0

什麼都沒有提出。 – asgwar12 2014-09-24 06:48:51