how to implement Bootstrap Navbar Dropdown

Question

How to implement bootstrap 4 navbar dropdown. I am using class.navvbar-bottom to make it horozontal.**

.navbar-bottom class to add scrollbar to navbar**

.navbar-bottom {
    overflow-x: auto;
    white-space: nowrap;
}

HTML

<nav class="navbar navbar-expand navbar-light navbar-bottom">
    <ul class="navbar-nav mr-auto pl-2">
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
        <li class="nav-item">
            <div class="dropdown">
                <a class="nav-link" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Dropdown1</a>
                    <a href="#" class="dropdown-item">Dropdown2</a>
                    <a href="#" class="dropdown-item">Dropdown3</a>
                    <a href="#" class="dropdown-item">Dropdown4</a>
                </div>
            </div>
        </li>
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
        .........................................................................
        .........................................................................
        .........................................................................
        .........................................................................
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
    </ul>
</nav>

Answer 1

<nav class="navbar navbar-expand navbar-light">
    <ul class="navbar-nav mr-auto pl-2">
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
        <li class="nav-item">
            <div class="dropdown">
                <a class="nav-link" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Dropdown1</a>
                    <a href="#" class="dropdown-item">Dropdown2</a>
                    <a href="#" class="dropdown-item">Dropdown3</a>
                    <a href="#" class="dropdown-item">Dropdown4</a>
                </div>
            </div>
        </li>
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
        .........................................................................
        .........................................................................
        .........................................................................
        .........................................................................
        <li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
    </ul>
</nav>

This is how you can add a dropdown to your navbar menu item. Don't forget to add Bootstrap CDN's for CSS and JS in your HTML file. Also, you don't need navbar-bottom class to make the navbar horizontal.