Bootstrap dropdown menu content covered by content below: - html

Question

https://www.dropbox.com/s/aqr0444isul1rky/Screenshot%202014-09-23%2022.06.49.png?dl=0
Above is an image of the about us dropdown in the header. When I click it, the below content is currently taking priority over the dropdown menu content.
This should not be the case but it is. Below is a picture of what it looks like when I click it:
https://www.dropbox.com/s/5ud446l7hpz7veg/Screenshot%202014-09-23%2022.08.15.png?dl=0
As you can see it's white and the content below is covering it from showing. There is a little white space but it's not taking up what it should.
I've searched around SO/Google and most answers say to add a higher z-index. I have tried this and it did NOT work.
This is the current CSS for the header (non-bootstrap but it works) and it shows the content properly:
#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);
}
What can be the solution to this? There is other CSS from a wordpress website -- how can I tell the dropdown menu to be given priority to take up this space?

Answer 1

try this
.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);
}