nav-pills' submenu behaviour when menu is collapsed

Question

I've already read some other discussion about how to use pills as menu and I can make them behave correctly also when the menu is collapsed (when only the toggle button is shown).

The problem comes when a pill has a submenu, in this case, when the menu is collapsed, as I click on the toggle button the pills appear stacked and not one aside the other, but as I click on a pill which has a submenu (Link 1 in this case), the submenu appears as a normal dropdown over the elements below.

I would like to have the same behaviour as navbar, when you click on a menu item which has a submenu, the sumbenu slides down the next menu items, it doesn't appear over them.

Now some code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script>
        $(document).ready(function() {
            $('#nav-menu').on('show.bs.collapse', function () {
                $('.nav-pills').addClass('nav-stacked');
            });
    
            $('#nav-menu').on('hide.bs.collapse', function () {
                $('.nav-pills').removeClass('nav-stacked');
            });
        });
    </script>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-menu">
                <span class="sr-only">Toggle menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
    
        <div class="collapse navbar-collapse" id="nav-menu">
            <ul class="nav nav-pills">
                <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 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>
                    </ul>
                </li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>
    </nav>

Is it possible to have the submenu to behave as I wish?

Answer 1

If I clearly understood you, all you have to do, just to add class navbar-nav into main ul:

<ul class="nav navbar-nav nav-pills">

jsfiddle-example