Bootstrap 4 - Submenu

Добрый день!
Нужна помощь, не правильно работает Submenu. При нажатии на «Submenu Link» список раскрывается вниз, а нужно вправо. Использую Bootstrap 4.
Подскажите, что я сделал не так?
Спасибо за ответ.

<nav class="navbar navbar-expand-sm bg-light  text-dark">
    <div class="container">
        <!-- Links -->
        <ul class="navbar-nav">
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-secondary" href="" id="navbardrop" data-toggle="dropdown">Link</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 1</a>
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 2</a>
                </div>
            </li>
            <!-- Links -->
            <li class="nav-item">
                <a class="nav-link text-secondary" href="#">|Link</a>
            </li>
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-secondary" href="" id="navbardrop" data-toggle="dropdown">| Link</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 1</a>
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 2</a>
                </div>
            </li>
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-secondary" href="" id="navbardrop" data-toggle="dropdown">| Link</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 1 </a>
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 2 </a>
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 3 </a>
                                        
                    <a class="dropdown-item text-secondary" href="" id="navbardrop" data-toggle="dropdown">Submenu Link</a>
                    <div class="dropdown-submenu">
                        <div class="dropdown-menu">
                            <a class="dropdown-item text-secondary" href="#">Dropdown Submenu Link 1</a>
							<a class="dropdown-item text-secondary" href="#">Dropdown Submenu Link 2</a>
                        </div>
                    </div>
                </div>
            </li>
            <!-- Links -->
            <li class="nav-item">
                <a class="nav-link text-secondary" href="#">|Link</a>
            </li>
        </ul>
    </div>
</nav>