I'm trying to use Twitter Bootstrap's dropdown menu in its top nav bar. You can see an example working here. http://twitter.github.com/bootstrap/#
In mine, the arrow indicating that it's a dropdown shows on the menu but when I hover or click on it it doesn't reveal my dropdown links. I think I've included all the necessary classes, and I don't believe Twitter's requires javascript.
Can you see what I'm doing wrong?
My dropdown
<div class='topbar' data-dropdown="dropdown">
<div class='fill'>
<div class='container'>
<ul class="nav">
<li><%= link_to 'Home', main_app.root_path %></li>
<li><%= link_to 'Outlines', main_app.outlines_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assessment</a>
<ul class="dropdown-menu">
<li><a href="#">second link </a></li>
<li><a href="#">third link </a></li>
</ul>
</li>
..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work.
Twitter Bootstrap
<div class="topbar" data-dropdown="dropdown">
<div class="topbar-inner">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /topbar-inner -->
</div>
This question is related to
css
twitter-bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<!-- core CSS -->
<link href="http://webdesign9.in/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/font-awesome.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head><!--/head-->
<body class="homepage">
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" title="Web Design Company in Mumbai" href="index.php"><img src="images/logo.png" alt="The Best Web Design Company in Mumbai" /></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="term-condition.php">Terms & Condition</a></li></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
</body>
</html>
I had a similar problem and it was the version of bootstrap.js included in my visual studio project. I linked to here and it worked great
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
It's also possible to customise your bootstrap build by using:
http://twitter.github.com/bootstrap/customize.html
All the plugins are included by default.
You must include jQuery in the project.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I didn't find any doc about this so I just opened a random code example from tutorialrepublic.com http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php
Hope this helps someone else.
Source: Stackoverflow.com