Il menu a discesa viene visualizzato sotto l'elemento della barra di navigazione errato: menu a discesa, allineamento, twitter-bootstrap-2

Sto creando un sito con Bootstrap 2 e mi piacerebbe aggiungere un menu a discesa a un elemento nella barra di navigazione.

Abbastanza semplice Tuttavia, quando il menu a discesa viene espanso, viene visualizzato sotto l'elemento errato nella barra di navigazione:

Nota nello screenshot sopra che il menu a discesa viene visualizzato sotto "Admin" (l'elemento della barra di navigazione più a sinistra) anziché "Locator" (l'elemento che attiva il menu a discesa).

Come posso risolvere questo in modo che il menu a discesa venga visualizzato sotto l'elemento della barra di navigazione corretta?

Ecco l'HTML per la barra di navigazione:

<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>

risposte:

Il tuo menu a discesa viene visualizzato nel posto sbagliato perché ti manca la classe che definisce la posizione relativa per il tuo menu a discesa. Per risolvere il problema, basta aggiungere il .dropdown classificare la voce del menu con un sottomenu in questo modo:

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

Ecco il tuo markup fisso:

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>