Bootstrap navbar-collapse not working properly when using nested navbars

Question

I am using Bootstrap 3.0. When I am trying to use nested Navbar's (navbar inside another navbar), the child navbar is not working properly. When I am clicking on the child navbar, it's not expanding in the collapse view (mobile view). Please find the mentioned navbar

<li><a href="/">Dashboard</a>
</li>
<li> <a class="dropdown-toggle" data-toggle="dropdown">Employees<i class="icon-angle-down"></i></a> 
    <ul class="dropdown-menu">
        <li><a href="#">A</a>
        </li>
        <li><a href="#">B</a>
        </li>
        <li><a href="#">C</a>
        </li>
        <li><a href="#">D</a>
        </li>
        <li class="dropdown"> <a tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">Reports<i class="glyphicon glyphicon-chevron-right pull-right"></i></a> 
            <ul class="dropdown-menu">
                <li><a href="#">1</a>
                </li>
                <li><a href="#">2</a>
                </li>
                <li><a href="#">3</a>
                </li>
                <li><a href="#">4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">E</a>
        </li>
        <li><a href="#">F</a>
        </li>
        <li><a href="#">G</a>
        </li>
        <li><a href="#">H</a>
        </li>
    </ul>
</li>

Thanks in advance :).

Answer 1

The dropdown submenu have been removed in Bootstrap 3. (See: Bootstrap 3 dropdown sub menu missing)

So, you'd have to do something like this: http://bootply.com/103024

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
  <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 class="dropdown-submenu">
    <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level</a></li>
      <li><a href="#">Second level</a></li>
      <li><a href="#">Second level</a></li>
    </ul>
  </li>
</ul>