Third level bootstrap sub-menus

Question

I am not an expert on css or bootstrap but after a while I manage to get a bootstrap nav menu almost finished. What I am missing is the css for the third level menu items. I think this are probably already on the bootstrap css, but maybe I have not added the class names properly.

This is the bootstrap css that I have overwritten:

/**
Bootstrap nav
**/
.navbar-default {
  background-color: #0090e5;
  border: 0 !important;  
}

.navbar-default ul {
    list-style-type: none;
}

.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li a:hover,
.navbar-default .navbar-nav > li a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > li .dropdown-menu {
  background-color: #0090e5;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li a:focus {
  color: #ffffff;
  background-color: #63b7e8;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #63b7e8;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: #63b7e8;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #63b7e8;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #63b7e8;
}
.navbar-default .navbar-toggle {
  border-color: #63b7e8;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #63b7e8;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #63b7e8;
  }
}

And this is how I made the nav bar with a javascript to add classes.

<!-- Begin Navbar -->
                <div class="col-sm-10 col-md-8 col-md-offset-1">
                  <div class="navbar navbar-default " role="navigation">
                      <div class="container-fluid">
                          <div class="navbar-header">
                              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>                            
                              <div class="collapse navbar-collapse">
                                  <jdoc:include type="modules" name="menu"/>
                              </div> <!-- /.navbar-collapse collapse -->
                          </div> <!-- /.container-fluid -->
                      </div><!-- /.navbar .navbar-inverse -->
                  </div>
                  <!-- End Navbar --> 

This comes after the tag

<script type="text/javascript">
  (function($){
        jQuery(document).ready(function(){
          $('.navbar-nav > .parent').addClass('dropdown');
          $('.navbar-nav > .parent > a').addClass('dropdown-toggle');
          $('.navbar-nav > .parent > a').attr('data-toggle', 'dropdown');
          $('.navbar-nav > .parent > a').attr('href','#');
          $('.navbar-nav > .parent > a').append('<span class="caret"></span>');
          $('.navbar-nav > .parent > ul').addClass('dropdown-menu');
        });
      })(jQuery);
</script>

Answer 1

Bootstrap 3 removed support for third level sub menus. See this stackoverflow answer for workarounds: https://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing

For Bootstrap 2 this could be interesting: https://stackoverflow.com/questions/17380517/bootstrap-3-level-collapsing-menu