Dropdown Menu Bar/Ribbon in Bootstrap

ddmenu.html

<nav class="main-nav dropdown">
    <ul class="list-inline">
        <li id="liSort">
            <button class="btn btn-link" data-toggle="dropdown">
                <i class="fa fa-sort-amount-asc"></i>
                <span class="hidden-xs">Sort</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="liSort">
                <li role="presentation"><a role="menuitem" tabindex="-1">Sort Option 1</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1">Sort Option 2</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1">Sort Option 3</a></li>
            </ul>
        </li>
        <li id="liOptions">
            <button class="btn btn-link" data-toggle="dropdown">
                <i class="fa fa-filter"></i>
                <span class="hidden-xs">Options</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="liOptions">
                <li role="presentation"><a role="menuitem" tabindex="-1">Sort Option 1</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1">Sort Option 2</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1">Sort Option 3</a></li>
            </ul>
        </li>
        <li id="liHelp">
            <button class="btn btn-link" data-toggle="collapse" data-target="#help">
                <i class="fa fa-question-circle"></i>
                <span class="hidden-xs">Help</span>
            </button>
        </li>
    </ul>
</nav>