Menu responsive dos niveles con Bootstrap

[AitorLopez]

Hola. Estoy intentando hacer un menu a 2 niveles con bootstrap. En un pc funciona perfectamente, pongo el navegador en una resolución pequeña, el menú se transforma en el botoncito, pulso y se despliega el menu, pulso en dropdown y se despliega el siguiente menu y al llegar a more options se muestra el siguiente menu. Hasta aqui perfecto.

Si estoy en un movil, no funciona, al pinchar en Dropdown, se muestra el siguiente menu pero al pulsar en more options, el menu se cierra.

Llevo revisando la documentación ni se sabe, pero nada, a ver si me podeis ayudar, por favor.

Gracias. Un saludo.

Código HTML:

<div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a href="#" class="brand">Title</a>
                  
                  
                  <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          
                          <li class="dropdown-submenu">
                          <a href="#" tabindex="-1">More options</a>
                          
                             <ul class="dropdown-menu">
                            
                                <li><a href="#" tabindex="-1">Second level link</a></li>
                                      <li><a href="#" tabindex="-1">Second level link</a></li>
                                      <li><a href="#" tabindex="-1">Second level link</a></li>
                            
                            </ul>
                          
                          </li>
                          
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li class="nav-header">Nav header</li>
                          <li><a href="#">Separated link</a></li>
                          <li><a href="#">One more separated link</a></li>
                        </ul>
                      </li>
                    </ul>
 
                  </div><!-- /.nav-collapse -->
                </div>
              </div><!-- /navbar-inner -->
            </div>