Bootstrap - Responsive Menu Fix - css

Question

http://www.bootply.com/jwGIUdSuHM
I am using Bootstrap, and I have two menus at the top. Once I make my window narrow, my "responsive view" looks like this when I click on My Account. Notice the overlapping options (not good). How can I fix that?
I've tried setting this to 700 instead of approximately 300 pixels:
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 700px; }
... and although the problem is gone, it doesn't quite do it for me, because it makes my menu stretch way to long on a phone. So how can I fix that ugly overlap while keeping my menu the same height?
CSS
body { margin-top: 125px; }
h1 {text-transform:uppercase;}
/* Header Nav*/
#faves, #cart {border:none;}
#nav {text-transform:uppercase;}
.multi-col-4 {width:820px;}
.multi-col-2 {width:400px;}
#media (max-width: 890px) {
body { margin-top: 65px; }
/* Nav*/
.multi-col {width:100%;}
}
HTML
<form>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<button id="faves" type="button" class="navbar-toggle btn-link btn-lg"> <span class="sr-only">Favorites</span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button id="cart" type="button" class="navbar-toggle btn-link btn-lg"> <span class="sr-only">Shopping Cart</span> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> </button>
<a class="navbar-brand" href="#">Logo</a> </div>
<!-- end navbar-header -->
<div id="nav" class="navbar-collapse collapse">
<div id="navTop" class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown hidden-xs"> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Cart (2) <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Something else here</li>
<li class="divider"></li>
<li>View Cart</li>
</ul>
</li>
<li class="dropdown hidden-xs"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Favorites (6) <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Something else here</li>
<li class="divider"></li>
<li>View All Favorites</li>
</ul>
</li>
<li> Option a </li>
<li class="dropdown"> My Account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="multi-col multi-col-4">
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
<li>Option 9</li>
<li>Option 10</li>
<li>Option 11</li>
<li>Option 12</li>
<li>Option 13</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Option 14</li>
<li>Option 15</li>
<li>Option 16</li>
<li>Option 17</li>
<li>Option 18</li>
<li>Option 19</li>
<li>Option 20</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Option 21</li>
<li>Option 21</li>
<li>Option 22</li>
<li>Option 23</li>
<li>Option 24</li>
<li>Option 25</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="navBottom" class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"> Option b <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="multi-col multi-col-4">
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Other Products</li>
<li>Action</li>
<li>Another action</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="dropdown"> Option c <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown"> Option d <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Another action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown"> Option e <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="multi-col multi-col-2">
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Account</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Tools</li>
<li>Action</li>
<li>Another action</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="dropdown"> Option f <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="multi-col multi-col-2">
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Account</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Tools</li>
<li>Action</li>
<li>Another action</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="dropdown"> Option g <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Another action</li>
</ul>
</div>
</div>
<!-- end nav -->
</div>
<!-- end container-fluid -->
</nav>
</form>

Answer 1

I got it resolved with these two lines:
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: none; }
#nav {max-height:400px;}