Выпадающее меню отображается под неправильным элементом навигации

Я создаю сайт с Bootstrap 2, и я бы хотел добавить раскрывающееся меню к одному элементу на панели навигации.

Прост достаточно. Однако, когда раскрывающийся список расширяется, он отображается под неправильным элементом на панели навигации:

Обратите внимание на приведенный выше снимок экрана, что выпадающее меню отображается под "Администратором" (самый левый элемент навигатора) вместо "Locator" (элемент, который активирует выпадающее меню).

Как исправить это, чтобы выпадающее меню появилось под правильным элементом навигации?

Вот HTML-код для навигатора:

<div>
 <div>
 <div>
 <a href="...">Dashboard</a>
 <div>
 <ul>
 <li><a href="...">Admin</a></li>
 <li><a href="...">Find Trips</a></li>
 <!-- Locator Dropdown -->
 <li>
 <a id="nav-locator-dropdown" href="..." data-toggle="dropdown" data-target="#">
 Locator
 
 </a>
 <ul 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>
1 ответ

Ваше раскрывающееся меню появляется не в том месте, потому что вам не хватает класса, который определяет относительную позицию для выпадающего списка. Чтобы исправить это, просто добавьте класс .dropdown к вашему элементу меню с таким подменю:

  • ...
  • Вот ваша фиксированная разметка:

    HTML

    <div>
     <div>
     <div>
     <a href="...">Dashboard</a>
     <div>
     <ul>
     <li><a href="...">Admin</a></li>
     <li><a href="...">Find Trips</a></li>
     <!-- Locator Dropdown -->
     <li>
     <a id="nav-locator-dropdown" href="..." data-toggle="dropdown" data-target="#">
     Locator
     
     </a>
     <ul 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>

    licensed under cc by-sa 3.0 with attribution.