强制bootstrap twitter nav下拉到100％的窗口高度

Question

我一直在尝试在导航栏下拉列表上编写内置的Bootstarp样式无济于事。我有一些javascript试图强制它但我似乎无法让这个工作。本机引导程序javascript覆盖了我的并且它快速恢复到228px高度。这是我的代码：

    // CLOSE NAV BARS NO OVERLAPPING
$('.navbar button').click(function(){ 
    var $target = $($(this).data('target')); 
    if(!$target.hasClass('in')){
        $('.navbar .in').removeClass('in').height(0);
    }
});

    //DROPDOWN MODE SELECTOR LOGIN
    // Force 100% height mobile navigation
    $('#navbar-collapse-1, #navbar-collapse-2').css('height', $(window).height());

    $(".dropdown-menu li a").click(function(){
      var selText = $(this).text();
      $(this).parents('.modeSelector').find('.dropdown-toggle').html(selText+' <span class="modeSelect menu_toggleable glyphicon glyphicon-menu-down pull-right"></span>');
    });

    $('#myMode-glyphicon-mobile, #myMode-glyphicon').on('show.bs.dropdown', function () {
        $(".modeSelect").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
    });

    $('#myMode-glyphicon-mobile, #myMode-glyphicon').on('hidden.bs.dropdown', function () {
        $(".modeSelect").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
    });

// FLIP ALL THE GLYPHICONS NAVBAR

   $('#navbar-collapse-1').on('shown.bs.collapse', function () {
       $(".myMenu-glyphicon").removeClass("glyphicon-menu-down");
       $(".myMenu-glyphicon").addClass("glyphicon-menu-up");
       $(this).addClass("dropdown-open").removeClass("dropdown-closed");
       if( $('#navbar-collapse-2').hasClass('dropdown-open') ){
          $(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
          $(".myLogin-glyphicon").addClass("glyphicon-menu-down");
          $("#navbar-collapse-2").removeClass("dropdown-open");
          $("#navbar-collapse-2").addClass("dropdown-closed");
       }
    });

    $('#navbar-collapse-1').on('hidden.bs.collapse', function () {
       $(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
       $(".myMenu-glyphicon").addClass("glyphicon-menu-down");
       $(this).removeClass("dropdown-open").addClass("dropdown-closed");
    });


   $('#navbar-collapse-2').on('shown.bs.collapse', function () {
       $(".myLogin-glyphicon").removeClass("glyphicon-menu-down");
       $(".myLogin-glyphicon").addClass("glyphicon-menu-up");
       $(this).addClass("dropdown-open").removeClass("dropdown-closed");
       if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
          $(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
          $(".myMenu-glyphicon").addClass("glyphicon-menu-down");
          $("#navbar-collapse-1").removeClass("dropdown-open");
          $("#navbar-collapse-1").addClass("dropdown-closed");
       }
    });

    $('#navbar-collapse-2').on('hidden.bs.collapse', function () {
       $(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
       $(".myLogin-glyphicon").addClass("glyphicon-menu-down");
       $(this).removeClass("dropdown-open").addClass("dropdown-closed");
       if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
          $(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
          $(".myMenu-glyphicon").addClass("glyphicon-menu-down");
       }
    });

HTML

    <div class="header">
<!-- BEGIN SEARCH AND LOGIN -->
<div class="container">
        <div class="col-sm-4 logo hidden-xs"><a href="/"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></a></div>
            <div class="col-sm-4 login-wrapper hidden-xs">
                <ul class="list-inline header-list">
                    <li>Login to Navisphere</li> 
                      <li id="myMode-glyphicon" class="pull-right list-unstyled dropdown modeSelector">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Shippers <span class="modeSelect glyphicon glyphicon-menu-down"></span></a>
                        <ul class="modes list-unstyled dropdown-menu" role="menu">
                          <li><a href="#">Navisphere</a></li>
                          <li><a href="#">CHRWTrucks</a></li>
                          <li><a href="#">CHREUTransport</a></li>
                        </ul>
                      </li>
                </ul>
                <div class="clearfix"></div>
                  <form class="login-form" role="login">
                    <div class="form-group">
                      <input type="text" class="user-input form-control" placeholder="Username">
                      <input type="text" class="pass-input form-control" placeholder="Password">
                      <button type="submit" title="Login" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></button>
                    </div>
                  </form>
                </div>
                <div class="col-sm-4 search-wrapper hidden-xs">
                  <form class="search-form" role="search">
                    <div class="form-group">
                      <input type="text" class="search-input form-control" placeholder="Search">
                      <button type="submit" title="Search TMC" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                  </form>
                </div>
</div>
<div class="row mobileNav">
    <nav class="navbar navbar-default">
        <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand hidden-md hidden-xl hidden-sm hidden-lg" href="#"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="autocollapse" data-target="#navbar-collapse-1">
                    <span class="menu-toggle-text">MENU <i class="myMenu-glyphicon glyphicon glyphicon-menu-down"></i></span>
                </button>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
                    <span class="menu-toggle-text">LOGIN <i class="myLogin-glyphicon glyphicon glyphicon-menu-down"></i></span>
                </button>
            </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <form class="search-form mobileSearch-form hidden-sm hidden-md hidden-xl hidden-lg" role="search">
          <div class="form-group">
            <input type="text" class="search-input form-control" placeholder="Search">
            <button type="submit" title="Search TMC" class="btn btn-default mobileSearch-btn"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </form>
        <li class="active dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">SERVICES <span class="sr-only">(current)</span></a>
        <div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
        <div class="dividerNav"></div>
            <ul class="list-inline hidden-xs">
              <li><a href="#">TMS Technology</a></li>
              <li><a href="#">Process Management</a></li>
              <li><a href="#">Consulting</a></li>
              <li><a href="#">Small Business Technology</a></li>
              <li><a href="#">Global Control Tower</a></li>
            </ul>
        </div>       
      </li>
        <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">RESULTS</a>
        <div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
        <div class="dividerNav"></div>
            <ul class="list-inline hidden-xs">
              <li><a href="#">Manufacturing</a></li>
              <li><a href="#">Automotive</a></li>
              <li><a href="#">Food</a></li>
              <li><a href="#">Produce</a></li>
              <li><a href="#">Retail</a></li>
              <li><a href="#">Paper/Packaging</a></li>
              <li><a href="#">Beverage</a></li>
            </ul>
        </div>       
      </li>
        <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">RESOURCES</a>
        <div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
        <div class="dividerNav"></div>
            <ul class="list-inline hidden-xs">
              <li><a href="#">Videos</a></li>
              <li><a href="#">White Papers</a></li>
              <li><a href="#">Case Studies</a></li>
              <li><a href="#">Blog</a></li>
            </ul>
        </div>       
      </li>
        <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">ABOUT</a>
        <div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
        <div class="dividerNav"></div>
            <ul class="list-inline hidden-xs">
              <li><a href="#">Our Story</a></li>
              <li><a href="#">Values</a></li>
              <li><a href="#">Leadership</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">Charitble Giving</a></li>
            </ul>
        </div>       
      </li>
        <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">CONTACT</a>
        <div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
        <div class="dividerNav"></div>
            <ul class="list-inline hidden-xs">
              <li><a href="#">Locations</a></li>
              <li><a href="#">Connect with an Expert</a></li>
              <li><a href="#">Email News</a></li>
              <li><a href="#">Update Preferences</a></li>
            </ul>
        </div>       
      </li>
      </ul>

    </div><!-- /.navbar-collapse -->
    <div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-2">
        <ul class="nav navbar-nav hidden-md hidden-xl hidden-sm hidden-lg mobileLogin">
            <li>
              <ul class="header-list list-unstyled">
                <li class="list-unstyled mobile">Login to Navisphere</li> 
                  <li id="myMode-glyphicon-mobile" class="list-unstyled dropdown modeSelector">
                    <a  href="#" class="mobileDropdown dropdown-toggle mobile" data-toggle="dropdown" role="button" aria-expanded="false">Shippers <span class="modeSelect glyphicon glyphicon-menu-down pull-right"></span></a>
                    <ul class="mobileList list-unstyled dropdown-menu mobile" role="menu">
                      <li><a href="#">Navisphere</a></li>
                      <li><a href="#">CHRWTrucks</a></li>
                      <li><a href="#">CHREUTransport</a></li>
                    </ul>
                  </li>
              </ul>
            </li>
            <div class="clearfix"></div>
            <form class="login-form" role="login">
              <div class="form-group">
                <input type="text" class="user-input form-control longin-control" placeholder="Username">
                <input type="text" class="pass-input form-control login-control" placeholder="Password">
                <button type="submit" title="Login" class="btn btn-default mobileSearch-btn pull-right"><i class="glyphicon glyphicon-arrow-right"></i></button>
              </div>
            </form>
        </ul>
    </div>
</div><!-- /.container -->


</nav>  
</div>
</div>
<!-- END HEADER -->

CSS

CSS

/************* BASIC STYLES **************/
a {
    color:@tmcLightblue;
    text-decoration:none;
    }
a:hover {
    text-decoration:none;
    }
p {
    margin: 10px 0;
    }
body{
    font-family:"Lato";
    overflow-x:hidden;
    }
html,body {
    height: 100%;
    min-height: 100%;
    }

/*********  NAV STYLES  *********/
.dividerNav{
    height:4px;
    background-color:#fff;
    }
.navbar.navbar-default > .container{
    border-bottom:1px solid @tmcDarkblue
    }
.menu-toggle-text{
    color:#4fb4e1;
    }
.navbar-toggle{
    border:none;
    padding:9px 1px;
    }
.navbar-toggle:hover .navbar-toggle:focus{
    background-color:none;
    }
.hover-dropdown{
    background-color:transparent;
    }
.hover-dropdown ul{
    border: medium none;
    border-radius:0px;
    background-color: rgba(0,58,99,0.80);
    padding: 25px 0;
    }
.navbar .hover-dropdown li a{
    color:#fff;
    margin: 0 18px;
    }
.header-list{
    margin-bottom:4px; 
    margin-top:15px;
    }
.navbar-brand{
    text-indent:-999px; 
    max-width:234px; 
    width:100%; 
    height:auto;
    }
.nav > li {
    display: block;
    position: static; 
    margin: 0 25px 0 0;
    }
.subscribe-input, .form-control:focus{
    box-shadow:none; 
    border-color:@tmcDarkblue;
    }
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
    }
.navbar {
    text-align: center;
    margin-bottom:8px; 
    border-bottom:none; 
    border-top:0px; 
    border-radius:0px; 
    border-left:0px; 
    border-right:0px; 
    border-top:0px;
    }
.mobileNav{
    margin-left: 0px;
    margin-right: 0px;
    display:block;
    height:100%;
    }   
.modeSelector{
    right:57px;
    }
.dropdown a{
    text-decoration:none;
    }
.navbar .hover-dropdown li a:hover {
    text-decoration:none;
    color:@tmcLightblue;
    }
.dropdown-menu{
    width:100%;
    text-align:center;
    box-shadow:none;
    border:none;
    border-radius:0;
    }
.mainDropdown{
    margin-top:-1px !important;
    }
.modes{
    border:1px solid @tmcDarkblue;
    border-radius:0px; 
    text-align:left;
    }
.modes li a{
    color:@tmcDarkblue;
    }
.modes li a:hover{
    color:@tmcLightblue;
    }
.user-input, .pass-input{
    width:41.5%;
    float:left;
    }
.search-input{
    width:82%;
    }
.subscribe-input, .form-control{
    border-radius:0px;
    border-color:@tmcDarkblue;
    color:@tmcDarkgrey;
    float:left;
    margin-right:4px;
    }
.glyphicon-arrow-right{
    color:#c05d1a;
    }
.glyphicon-search{
    color:#c05d1a;
    }
.logo, .search-wrapper {
    padding-top:39px
    }

#navbar-collapse-2, #navbar-collapse-1{
    position: static; 
    width: 100%; 
    z-index: 2147483647;
    }
.nav > li.dropdown{
    /*border-bottom:2px solid #fff;*/
    }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
    color:@tmcLightblue;
    background-color:none; 
    background:none; 
    border-bottom:2px solid @tmcDarkblue;
    font-weight:bold;
    }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent; 
    color:@tmcLightblue;
    }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: transparent !important; 
    color: @tmcLightblue;
    }
.navbar-nav > li > a{
    border-bottom:2px solid #fff;
    }
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background-color: #fff; 
    border-color: @tmcOrange; 
    color: #fff;
    }
.glyphicon .glyphicon-search:hover {
    color: #fff;
    }

    /********* HEADLINES *********/
.headlineBorder{
    display:inline; 
    text-transform:uppercase; 
    font-size:20px;
    /*border-bottom:3px solid @tmcGreen;*/
    }
.headlineBorderblue{
    display:inline; 
    text-transform:uppercase; 
    /*border-bottom:3px solid @tmcDarkblue;*/
    }
.headlineBorderwhite{
    display:inline; 
    text-transform:uppercase; 
    /*border-bottom:3px solid #fff;*/
    color:#fff;
    }
.headlineBorderwhite_small {
    font-size: 22px;
    margin: 0 0 5px;
    }
.headlineList{
    margin-bottom:15px;
    }
.btn-blue{
    border-color:@tmcLightblue;
    }
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
    background-color:@tmcDarkblue; 
    border-color:#fff;
    }
.glyphicon-menu-right:hover{
    color:#fff !important;
    }
.headlineGlyph:hover{
    color:@tmcLightblue !important;
    }
.btn-mobile-right {
    border:none;
    }
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
    background-color: transparent;
    }
.glyphicon-menu-right, .glyphicon-menu-left{
    /*color:@tmcLightblue;*/
    }
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
    color:#fff;
    }

.fourXfour{
    margin-bottom: 50px;
    }
/********** SIDEBAR STYLES ***********/
.sidebarImg{
    margin:15px;
    }
.sidebarImg > a {
    display: block;
    }
.caption{
    margin-top:30px; 
    padding-left:15px; 
    padding-right:15px;
    }
.caption > h4{
    font-weight:bold; 
    line-height:12px;
    }

/*********** CONTACT PAGE STYLES ***********/
.pageIntroheadline > ul.contactList li a{
    color:#fff;
    }
.fourXfour > ul.contactList li a{
    color:@tmcLightblue;
    }
.contactList{
    margin-top:15px;
    }
#myMap{
    background:url('../images/worldMap.jpg');
    background-repeat: no-repeat;
    background-size:contain;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * width) */
    /* (853 / 1280 * 100) */
    }

.mapDescriptionwrapper{
    display:block; 
    margin:-5px 0 0; 
    z-index:1;
    }
.mapTitle{
    background:@tmcLightblue; 
    padding:5px 8px; 
    border:1px solid #fff; 
    display:inline-block; 
    width:auto; 
    text-align:center; 
    color:#fff;
     z-index:10; 
     }
.mapTitle:hover{
    display:block; 
    background:orange; 
    display:inline-block;
    }
.mapDescription{
    display:none;
    }

#description-box{
   background-color: @tmcLightblue;
   border: 1px solid white;
    }


/********* INSIDE PAGE HERO IMAGE ************/

.insidePagehero {
    display: block;
    height: auto;
    max-width: 960px;
    min-height: 232px;
    min-width: 392px;
    width: 100%;

}
.halfHero{
    padding:0;
    }
.insideHerocolorPicker-orange{
    background:@tmcOrange;
    }
.insideHerocolorPicker-darkBlue{
    background:@tmcDarkblue;
    }
.insideHerocolorPicker-lightBlue{
    background:@tmcLightblue;
    }
.insideHerocolorPicker-green{
    background:@tmcGreen;
    }
.pageIntroheadline{
    display: block;
    color:#fff;
    margin-top:5%;
    margin-bottom:0;
    }
.pageHero {
    padding:0 15px 0 0;
    }
/*********  HOMEPAGE MARKETING AREA  *********/
.marketing-wrapper{
    margin-top:50px;
    margin-bottom:50px;
    }
.mareting-section{
    padding:0;
    }
/************************* FLIPPING STYLES *******************/

.marketing-wrapper h2{
    margin-bottom:20px;
    }
.flipperWrap{
    padding:0;
    }
.card {
  width:100%;
  max-width: 750.666px;
  height: 348px;
  margin: 0px;
  display: inline-block;
  clear:both;
  }
 .flip {
    width:100%;
    max-width: 750.666px;
    height: 396px;
    margin: 0px;
    display: inline-block;
    clear:both;
    margin-bottom:30px;
    }
.front, .back {
  padding: 0px;
  }
.front {
  background-color: transparent;
  }
.back {
  background-color: transparent;
  }
.arrowFront{
   height:230px !important; 
  }
.arrowBack{
   height:230px !important;
   background:#c05d1a url(../images/triangle.jpg) no-repeat bottom right;     
  }

.blogInside, .tmsInside, .globalInside{
    height: 50%;
    margin: 2.5% auto;
    width: 78%;
    }

.flipBack{
    color:#fff; 
    padding: 0px;
    }
.flipOrange{
    background-color:@tmcOrange; 
    }
.flipDarkblue{
    background-color:@tmcDarkblue; 
    }
.flipLightblue{
    background-color:@tmcLightblue; 
    }
.flipGreen{
    background-color:@tmcGreen; 
    }
.flipDarkgrey{
    background-color:@tmcDarkgrey; 
    }
.flipLightgrey{
    background-color:@tmcLightgrey; 
    }
.blogIcon{
    background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 46px; 
    float:left; 
    margin:0 22px 0 0;
    }
.tmsIcon{
    background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 46px; 
    float:left; 
    margin:0 22px 0 0;
    }
.globalIcon{
    background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 38px; 
    float:left; 
    margin:0 22px 0 0;
    }

/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
    margin-top:30px;
    margin-bottom:30px;
    }
.leadershipCol {
    float: left;
    margin-right:15px;
    }
.leadershipName, .slider{
    color:#fff; 
    height:auto; 
    width:82%;
    max-width:138px;
    background-color:@tmcOrange; 
    padding:10px; 
    margin:-85px 0 0 38%; 
    border:1px solid #fff; 
    display:block; 
    float:left;
    }
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
    color:#fff; 
    margin:-8px 0;
    }
.leadershipImg{
    display:block; 
    float:left
    }

/**************** Client Results Page *******************/
.introText{
    padding:0;
    }
.clientResultsGrid{
    margin-top:30px;
    margin-bottom:30px;
    }
.panel-default{
    padding:0;
    border:none;
    }
.panel-default > .panel-heading{
    border:none;
    color:@tmcDarkblue;
    background:#fff;
    }
.panel{
    box-shadow:none;
    }
.panel-body{
    background:@tmcLightgrey;
    padding: 15px 0;
    }
.panelResults{
    margin-bottom:15px;
    }
.panel-heading{
    padding: 0;
    background:@tmcLightblue;
    border-radius:0px;
    margin-bottom:5px;
    }
.panel-title{
    color:#fff;
    padding: 15px 0;
    font-weight: bold;
    text-transform: uppercase;
    }
.accordionResults{
    padding: 0;
    }
.accordionIcon{
    color: #fff;
    display: inline-block;
    font-size: 33px;
    min-width: 50px;
    padding: 7.5px 0;
    text-align: center;
    }
.resultsIcon{
    padding: 0 0.5%;
    width:auto;
    border-right:2px solid #fff;       
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    }
.resultsTitle{}
.glyphBox{
    background: none repeat scroll 0 0 #c0c920;
    display: inline-block;
    height: auto;
    margin: 15px 0 25px;
    min-height: 32px;
    min-width: 42px;
    padding: 4px;
    text-align: center;
}
a.glyphBox:hover, a.glyphBox:focus{
    color:@tmcGreen; 
    text-decoration:none; 
    outline:nonne; 
    outline-offset:0px;
    }
.glyphBox .indicator{
    color:#fff; 
    vertical-align:middle;
    }
.preResultsaccordion {
    padding:0;
    }
.preResultsaccordion > .inside{
    padding:0; 
    margin:15px 0;
    }
#collapseOne, #collapseTwo, #collapseThree, #collapseFour{
    padding:0;
    }

@media (max-width:@screen-lg) {

}
@media (max-width:@screen-md) {
        .navbar-nav > li > a {
        border-bottom: 0px solid #fff;
        }
    .modeSelector{
        right:0px;
        }
    .search-input{
        width:78%;
        }
    .user-input, .pass-input{
        width:37%;
        }

    }
@media (max-width:@screen-sm) {

    /*FEEDSLIDER*/ 
    .headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
        width:80%;
        }
    .mobile{
        color:#fff;
        } 
    .headlineHero{
        font-size:medium;
        }
    .secondaryNavigation-wrapper{
        background:@tmcDarkblue;
        padding: 15px 0 0;
        }
    .secondaryNavigation-mobile{
        color:#fff;
        list-style:none;
        padding-bottom: 0px;
        padding-left:0;
        padding-right:0;
        margin: 0 auto;
        width:47%;

        }
    .secondaryNavigation-mobile a{
        color:#fff;
        }
    .secondaryNavigation-mobile a:hover{
        color:@tmcLightblue;
        }
    ul.secondaryNavigation-mobile li{
        list-style:none;
        width:47%;
        display:inline-block;
        margin-bottom:0px;
        margin-right:3px;
        padding-bottom:0;
        padding-left:0;
        padding-right:0;
        vertical-align: top;
        padding-bottom:15px;
        }
    .navbar-toggle{
        font-size:medium;
        }

    .navbar-collapse{
        background-color: rgba(0,58,99,0.80);
        }
    .navbar-nav{
        margin:15px -15px;
        } 
    .nav > li > a{
        text-align:left; 
        padding-left:0px; 
        padding-right:0px; 
        color:#fff !important;
        } 
    .nav > li > a:hover{
        color:@tmcLightblue !important;
        } 
    .nav > li{
        margin:0px;
        }
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
        border-bottom:0px solid transparent;
         color:@tmcLightblue !important;
        }
    .navbar-brand{
        max-width:125px;
        margin:0 0 0 5px;
        } 
    #navbar-collapse-2, #navbar-collapse-1{
        position: absolute; 
        width: 100%; 
        z-index: 2147483647;
        }
    .subscribe-input{
        border-radius:0px; 
        border-color:@tmcDarkblue; 
        color:@tmcDarkgrey; 
        float:left; 
        margin-right:4px;
        } 
    .search-form{
        background-color:transparent !important; 
        color:#fff;
        }
    .mobileSearch-btn{
        border-color: #fff; 
        background-color:transparent;
        } 
    .mobileSearch-btn:hover{
        border-color: #fff; 
        background-color:transparent;
        } 
    .glyphicon-search {
        color: #fff;
        } 
    .glyphicon-arrow-right{
        color: #fff;
        }
    .mobileLogin{
        text-align:left;
        } 
    .login-control{
        float:none;
        }
    .user-input, .pass-input{
        margin:0 0 5px 0;
        width:100%; 
        float:none;
        } 
    .dropdown-menu{
        text-align:left;
        } 
    .mobileDropdown{
        background-color: transparent !important; 
        border: 1px solid #fff !important; 
        color: #fff; 
        margin: 5px 0 0; 
        padding: 6px 13px; 
        display: block;
        } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        background-color: #fff; 
        padding: 5px 0;
        } 
    .mobileList{ 
        background-color: #fff !important;
        border-radius: 0;
        padding: 0;
    } 
    .navbar-nav .open .mobileList{
        position:absolute; 
        width:100%;
        } 
    .mobileList li{
        padding:4px 14px; 
        border-bottom:1px solid @tmcDarkblue;
        }
    .mobileNav{
        margin-left: 0px;
        margin-right: 0px;
        }

}

Answer 1

您想要的是.dropdown-menu和.sub-menu类。

要更改菜单的高度，请尝试：

.dropdown-menu
{
    max-height: 400px;
}