Dropdown menu renders underneath incorrect navbar item

Question

I'm building a site with Bootstrap 2, and I'd like to add a dropdown menu to one item in the navbar.

Simple enough. However, when the dropdown is expanded, it appears underneath the incorrect item in the navbar:

Notice in the above screenshot that the dropdown renders underneath "Admin" (the leftmost navbar element) instead of "Locator" (the element that activates the dropdown).

How do I fix this so that the dropdown appears underneath the correct navbar element?

Here is the HTML for the navbar:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="...">Dashboard</a>

      <div class="nav-collapse collapse pull-right">
        <ul class="nav">
          <li><a href="...">Admin</a></li>
          <li><a href="...">Find Trips</a></li>

          <!-- Locator Dropdown -->
          <li>
            <a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
                   data-toggle="dropdown" data-target="#">
              Locator
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
              <li><a href="...">My Trips</a></li>
              <li><a href="...">Create Trip</a></li>
            </ul>
          </li>

          <li><a href="...">My Profile</a></li>
          <li><a href="...">Log Out</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Howardhowarth

Answer 1

Your dropdown is appearing on the wrong spot because you're missing the class that defines the relative position for your dropdown. To fix this, just add the .dropdown class to your menu item with a submenu like so:

<li class="dropdown"> ... </li>

Here is your fixed markup:

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="...">Dashboard</a>

      <div class="nav-collapse collapse pull-right">
        <ul class="nav">
          <li><a href="...">Admin</a></li>
          <li><a href="...">Find Trips</a></li>

          <!-- Locator Dropdown -->
          <li class="dropdown">
            <a id="nav-locator-dropdown" class="dropdown-toggle" href="..."
                   data-toggle="dropdown" data-target="#">
              Locator
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="nav-locator-dropdown">
              <li><a href="...">My Trips</a></li>
              <li><a href="...">Create Trip</a></li>
            </ul>
          </li>

          <li><a href="...">My Profile</a></li>
          <li><a href="...">Log Out</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Kyanite