Bootstrap Nested Navbars

How can I construct nested navbars in Bootstrap 3?

This fiddle is very close to what I want, except that I want the secondary tab to always be visible. In the fiddle everything is a toggle. In addition I want to use navbar-inverse, but in the fiddle if I change from navbar-default to navbar-inverse, the menu no longer works!

Below I have included some code that approximates what I want. The 2nd menu should appear when the Home is clicked, and the 3rd menu should appear when Page 1 is picked, and so on.

Can this be done?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#nav1">Home</a></li>
      <li><a href="#nav2">Page 1</a></li>
      <li><a href="#2">Page 2</a></li> 
      <li><a href="#3">Page 3</a></li> 
    </ul>
  </div>
</nav>

<nav id="nav1" class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home1</a></li>
      <li><a href="#">Page 12</a></li>
      <li><a href="#">Page 22</a></li> 
      <li><a href="#">Page 32</a></li> 
    </ul>
  </div>
</nav>

<nav id="nav2" class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home3</a></li>
      <li><a href="#">Page 13</a></li>
      <li><a href="#">Page 23</a></li> 
      <li><a href="#">Page 33</a></li> 
    </ul>
  </div>
</nav>