bootstrap mobile nav gets cut off by window shade when applying roll over

Question

I am using the Modern Business bootstrap theme: http://startbootstrap.com/templates/modern-business/ and when I apply the CSS code to have the main menu do rollover menus:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block; 
}

In mobile view the bottom menu gets cut off by the 'navbar-collapse' container. I have tried going through all of the CSS code multiple times using z-index and position but nothing is changing. Does anyone know how to make the drop down menu appear above the parent container. The flip side to this when I use this CSS (http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css) it works fine but I cannot find the specific place where the code is different from the CSS I am using (http://startbootstrap.com/templates/modern-business/css/bootstrap.css), I mean I know it is different but the nav tags are all pretty similar.

Answer 1

So after going through both CSS files numerous times, turning things on and off, and troubleshooting. It turns out that the startbootstrap.com css needs all .navbar-collapse classes turned off, so comment out all the classes:

.navbar-collapse:before,
.navbar-collapse:after {
  display: table;
  content: " ";
}

.navbar-collapse:after {
  clear: both;
}

.navbar-collapse:before,
.navbar-collapse:after {
  display: table;
  content: " ";
}

.navbar-collapse:after {
  clear: both;
}

.navbar-collapse.in {
  overflow-y: auto;
}