Bootstrap 3 Выпадающее меню не работает

Question

У меня есть небольшая проблема с моим выпадающим меню. Я не могу заставить его работать. Я уже несколько часов искал и все еще ничего.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-center"> 
 
     <li> <a href="#page-top" class="hidden-xs page-scroll" id="logowts" style="display:none;"><img src="img/wts-logo.png" style="width:40px; height:40px;" alt="World Travel Show" /></a> </li> 
 
     <li aria-haspopup="true" aria-expanded="false" class="dropdown" ><a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a><span class="caret"></span> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="">O TARGACH</a></li> 
 
      <li><a href="">SALONY</a></li> 
 
      <li><a href=""></a>DOJAZD</li> 
 
      <li><a href=""></a>DLA MEDIÓW</li> 
 
      </ul> 
 
     </li> 
 
     <li> <a class="page-scroll" href="podroznicy.html">PODRÓŻNICY</a> </li> 
 
     <li> <a class="page-scroll" href="#adoba">ATRAKCJE</a> </li> 
 
     <li> <a class="page-scroll" href="#harmonogram">HARMONOGRAM</a> </li> 
 
     <li> <a class="page-scroll" href="#dojazd">DOJAZD</a> </li> 
 
     <li> <a class="page-scroll" href="#salony">SALONY</a> </li> 
 
     <li> <a class="page-scroll" href="#dla_wystawcow">O TARGACH</a> </li> 
 
     <li> <a class="page-scroll" href="#wystawcy">WYSTAWCY</a> </li> 
 
     <li> <a class="" href="http://targi.kadryturystyki.pl/" target="_blank">SZKOLENIA</a> </li> 
 
     <li> <a href="media.html" target="_blank">DLA MEDIÓW</a> </li> 
 
     
 
     <li> <a class="page-scroll" href="#contact">KONTAKT</a> </li> 
 
     <li> <a class="page-scroll hidden-xs" href="#contact" id="logopwe" style="display:none;"><img src="img/pwe-logo.png" alt="Ptak Warsaw Expo" style="height:40px; width:40px;" /></a> </li> 
 
     </ul> 
 
    </div>

CodePen

Answer 1

<span class="caret"></span> должен быть внутри выпадающего <a>...</a> тега.
Изменить

<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a> <span class="caret"></span> 

в

<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#">WORLD TRAVEL SHOW <span class="caret"></span></a> 

Bootply
http://www.bootply.com/wS18cO4pfA

Answer 2

Вот как я использую Bootstrap ниспадающее меню, и она отлично работает:

<div class="btn-group"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button</button> 
    <ul class="dropdown-menu"> 
     <div>Something</div> 
    </ul> 
</div> 

Удачи вам!