Why doesn't this bootstrap dropdown example work?
css, html, jquery, twitter-bootstrap
Solution
I see two problems with your markup.
First, you're including the bootstrap plugin "before" the jquery plugin. Jquery first, bootstrap plugins second.
Second, you're using a DOCTYPE that is not supported by the bootstrap, you have to use HTML5's DOCTYPE:
<!DOCTYPE html>
Problem
I'm just trying out the example in Bootstrap documentation, but it doesn't seem to work. I just get plain HTML. This is my code: ``` <!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" /> <link rel="stylesheet" href="bootstrap.css" type="text/css"> <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $('.dropdown-toggle').dropdown(); </script> <title>Dropdown</title> </head> <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown" id="menu1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> ... </ul> </body> </html> ``` Does anyone see the problem? Thanks.