First I looked at [[http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3]]

This gave me
<code>
<div class="container">
 <div class="row">
  <h2>Multi level dropdown menu in Bootstrap 3</h2>
  <hr>
  <div class="dropdown">
   <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">Dropdown <span class="caret"></span></a>
   <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
    <li><a href="#">Some action</a></li>
    <li><a href="#">Some other action</a></li>
    <li class="divider"></li>
    <li class="dropdown-submenu">
     <a tabindex="-1" href="#">Hover me for more options</a>
     <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level</a></li>
      <li class="dropdown-submenu">
       <a href="#">Even More..</a>
       <ul class="dropdown-menu">
        <li><a href="#">3rd level</a></li>
        <li><a href="#">3rd level</a></li>
       </ul>
      </li>
      <li><a href="#">Second level</a></li>
      <li><a href="#">Second level</a></li>
     </ul>
    </li>
   </ul>
  </div>
 </div>
</div>
</code>

and the CSS
<code>
.dropdown-submenu {position: relative;}
.dropdown-submenu>.dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px;
 border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {display: block;}
.dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #ccc;
 margin-top: 5px;
 margin-right: -10px;
}
.dropdown-submenu:hover>a:after {border-left-color: #fff;}
.dropdown-submenu.pull-left {float: none;}
.dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
}
</code>

but a look at this for a fixed top navbar [[https://codepen.io/ajaypatelaj/pen/prHjD]]
<code>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#">NavBar</a>
  </div>
  <div class="collapse navbar-collapse">
   <ul class="nav navbar-nav navbar-right">
    <li>
     <a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub Project</a>
    </li>
   </ul>
   <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li>
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
     <ul class="dropdown-menu multi-level">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li class="divider"></li>
      <li><a href="#">One more separated link</a></li>
      <li class="dropdown-submenu">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
       <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li class="dropdown-submenu">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
          <li class="dropdown-submenu">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
           <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
           </ul>
          </li>
         </ul>
        </li>
       </ul>
      </li>
     </ul>
    </li>
    <li>
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li class="divider"></li>
      <li><a href="#">One more separated link</a></li>
      <li class="dropdown-submenu">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
       <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
          <li class="dropdown-submenu">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
           <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
           </ul>
          </li>
         </ul>
        </li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </div><!--/.nav-collapse -->
 </div>
</div>

<div class="container">
 <div class="navbar-template text-center">
  <h1>Bootstrap NavBar</h1>
  <p class="lead text-info">NavBar with too many childs.</p>
  <a target="_blank" href="http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3">Thanks to msurguy (Multi level dropdown menu BS3)</a>
 </div>
</div>
</code>

and the CSS
<code>
.dropdown-submenu {position: relative;}

.dropdown-submenu>.dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px;
 border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {display: block;}
.dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #ccc;
 margin-top: 5px;
 margin-right: -10px;
}
.dropdown-submenu:hover>a:after {border-left-color: #fff;}
.dropdown-submenu.pull-left {float: none;}
.dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
}
</code>

We end up with this [[mier-multilevel-dropdown-menu|Navigation]] code for the MIER website