Display dropdown menu horizontally

I am trying to get my drop down menu links to display horizontally instead of vertically.

<!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products</a>
                    <ul class="dropdown-menu">
                                <ul class='list-inline'>
                                    <li><a href="products1.html" id="">This is a product page</a>
                                    </li>
                                    <li><a href="products2.html" id="">This is also a product page</a>
                                    </li>
                                    <li><a href="#" id="">3</a>
                                    </li>
                                    <li><a href="#" id="">4</a>
                                    </li>
                                    <li><a href="#" id="">5</a>
                                    </li>
                                </ul>
                    </ul>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>

I am using one of the standard bootstrap templates. The title for each product page are a few words but the text in there now is just as an example.

dropdown image example