Dropdown In Bootstrap Navbar

I am trying this navbar out with a dropdown. When I try to build it into my webservice I don't get the dropdown working. I can click on it but nothing happens there. This is my cur

Solution 1:

Add J query & Bootstrap File

Remove this class collapse

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
     <nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;">
        <div class="container-fluid">
          <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="#">Foo</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bar<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Foo</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Bar</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Baz</a></li>
                </ul>
              </li>
              <li><a href="#">Baz</a></li>
            </ul>
          </div>
        </div>
      </nav>

Solution 2:

Navbar Default navbar Requires JavaScript plugin

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

Here is the plugin: http://getbootstrap.com/javascript/#collapse

From: http://getbootstrap.com/components/#navbar

Solution 3:

Because you are missing responsive dropdown

HTML

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>

DEMO HERE