Search code examples
twitter-bootstraptwitter-bootstrap-2

Dropdown menu not showing in Bootstrap


I'm trying to get a basic dropdown menu in Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <div class="dropdown">
      <!-- Link or button to toggle dropdown -->
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

  </body>
</html>

However, nothing shows up. I know the local CSS and JS files are being referred correctly. As far as I understand, the default JS includes all the plugins.

EDIT: Thanks to all for your feedback. I can only add, in case people find themselves in the same situation I am, to move further down in the tutorial before copying and pasting the snippets.


Solution

  • I think your code was basically good, but you are missing a link to trigger the drop down. See ths jsFiddle

    Note that I added

    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    

    Here's an example of how to include it in a complete nav bar

    Good luck!