Bootstrap submenu appears over dropdown

Question

I'm working with the newest Twitter Bootstrap and the "Respond" Theme from "Awful Media".

My problem is, that the submenu of my dropdown menu appears OVER the dropdown, and not on the right or so, and you can't read anything properly..

(I don't no which code I should post exactly, maybe it helps if you look at my beta-Testsite? The submenu which is causing problems is under "Take Action"..)

Answer 1

Match your html and classes from here

it is exactly same with your code {may you use the same }

Devin walker multi-child navbar for bootstrap

---

and add theme classes to new child's for same look and feel

if this resolves

try these styles for dropdown items

.navbar .nav > li > a {
  float: none;
  margin: 25px 10px 5px;
  padding: 5px;
  font-size: 18px;
  line-height: 19px;
  margin-left: 20px;
  color: #999999;
  border: none;
  background-image: url("../img/color.jpg");
  background-size: 100%;
  background-position: -200px -10px;
  background-repeat: no-repeat;
  font-family: 'Lato', sans-serif;
  -webkit-transition: background-position .5s ease, color .8s ease;  
  -moz-transition: background-position .5s ease, color .8s ease;
  -o-transition: background-position .5s ease, color .8s ease;
}
.navbar .nav > li > a:hover {
  color: #fff;
  background-position: 0 0;
  text-decoration: none;
  background-color: transparent;
  font-family: 'Lato', sans-serif;
}

.navbar .nav .active > a,
.navbar .nav .active > a:hover {
  text-decoration: none;
  color: #fff;
  background-position: 0 0;
  background-image: url("../img/color.jpg");
  background-size: 100%;
}