Bootstrap Inline List with Dropdown

Question

I'm using Bootstrap 3 with the list-inline class (I know I could use the default, but I don't want any of the default styling)

<nav class='main-nav'>
  <ul class="list-inline">
    <li><a href='#'>Test</a></li>
    <li>
        <a href='#' data-toggle="dropdown">Test</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href='#'>Test</a></li>
            <li><a href='#'>Test</a></li>
            <li><a href='#'>Test</a></li>
        </ul>
    </li>
  </ul>
</nav>

http://jsfiddle.net/9kVCZ/

But the dropdown doesn't appear under, it appears way at the bottom.

Answer 1

You need to add the class dropdown to your nav element.

<nav class='main-nav dropdown'>
<ul class="list-inline">
    <li><a href='#'>Test</a></li>
    <li>
        <a href='#' data-toggle="dropdown">Test</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href='#'>Test</a></li>
            <li><a href='#'>Test</a></li>
            <li><a href='#'>Test</a></li>
        </ul>
    </li>
</ul>
</nav>

Working Fiddle

Answer 2

If the goal of your code is to show the dropdown menu just by clicking on the second "Test", you should add the class dropdown to its parent <li>

<nav class='main-nav'>
    <ul class="list-inline">
        <li><a href='#'>Test1</a></li>
        <li class="dropdown">
            <a href='#' data-toggle="dropdown">Test2</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li><a href='#'>Test</a></li>
                <li><a href='#'>Test</a></li>
                <li><a href='#'>Test</a></li>
            </ul>
        </li>
    </ul>
</nav>

Updated fiddle