Aşağı açılır menü yanlış navbar öğesinin altında işleniyor

Question

Bootstrap 2 ile bir site yapıyorum ve navbardaki bir öğeye bir açılır menüyü eklemek istiyorum.

Yeterince basit. Açılan genişletildiğinde Ancak, gezinme çubuğu üzerinde yanlış öğenin altında görünür:

açılan "Yönetici" (en soldaki navbar elemanı) yerine "Locator altında kılan yukarıdaki ekran

Bildirimi "(açılır menüyü etkinleştiren öğe).

Bunu, açılırma doğru navbar öğesinin altında görünecek şekilde nasıl düzeltirim? İşte

gezinme çubuğu için HTML: Bunu, açılan için göreceli konumunu tanımlayan sınıfı kaçırıyorsun çünkü açılan yanlış yerde belirip

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

Answer 1

. Bunu düzeltmek için, sadece bu yüzden böyle bir alt menü ile menü öğesine .dropdown sınıfını ekleyin: Burada

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

sizin sabit biçimlendirme geçerli:

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>