CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
salxander
salxander

Reputation: 1091

Bootstrap dropdown menu not working

I am having some trouble with a dropdown menu with bootstrap. I have browsed around the other questions on here and not found an answer that is working for me. Here is the HTML head

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>On-Demand Reporting</title>
<link rel="stylesheet" type="text/css" href="styles/gridinator.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/bootstrap.js" type="text/javascript"></script>
<script src="scripts/jquery.tabify.js" type="text/javascript"></script>
</head>

I made careful note to link to JQuery before bootstrap.js

Here is the code for the button. This markup is taken pretty much exactly from the bootstrap 3 docs

<button type="button" class="btn btn-default dropdown pull-right" data-toggle="dropdown">
  User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
  <li><a href="#">Change Password</a></li>
  <li><a href="#">Logout</a></li>
</ul>

Then of course, the script to call the dropdown.

<script>
  $("document").ready(function() {
    $(".dropdown").dropdown();
  });
</script>

If anyone could help me figure out what I'm missing here I would really appreciate it. Thanks!

Upvotes: 0

Views: 2090

Answers (1)

412
412

Reputation: 1438

You need to wrap the entire dropdown menu with an element that has the .dropdown class

You also need to remove .pull-right from the button and apply it to .dropdown

<div class="dropdown pull-right">
<button type="button" class="btn btn-default dropdown" data-toggle="dropdown">
  User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
   <li><a href="#">Change Password</a></li>
   <li><a href="#">Logout</a></li>
</ul>
</div>

Example: http://jsfiddle.net/52VtD/404/

Upvotes: 1

Related Questions