CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
bashante
bashante

Reputation: 23

Bootstrap 3 Dropdown menu is not working

I have a little problem with my dropdown menu. I can't get it to work. I've been searching for a few hours already and still nothing. 

<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

Upvotes: 0

Views: 3772

Answers (2)

StaticBeagle
StaticBeagle

Reputation: 5175

The <span class="caret"></span> has to be inside the dropdown <a>...</a> tag.
Change 

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

to

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

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

Upvotes: 1

Tarlan Mammadzada
Tarlan Mammadzada

Reputation: 432

Here is how I use Bootstrap dropdown, and it works fine:

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

Good luck!

Upvotes: 0

Related Questions