Bootstrap dropdown doesn't work?

Question

Bootstrap dropdown isn't working for me. I did everything correctly as you can see it there:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script     src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links -->    <script type="text/javascript" charset="utf-8">$(window).load(function() {      $('.flexslider').flexslider({    animation: "slide"  });});</script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<header>
<div class="header">
<div class="container">
<ul class="menu">
<li class="current"><span style="color: #bde2e1;">Home</li>

<li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li class="hovering"><a href="#">Portfolio</a></li>
<li class="hovering"><a href="#">Releases</a></li>
<li class="hovering"><a href="#">Contact</a></li>
</ul>

</li>



<li class="hovering"><a href="#">Portfolio</a></li>
<li class="hovering"><a href="#">Releases</a></li>
<li class="hovering"><a href="#">Contact</a></li>
</ul>

Bootstrap is a ready framework with features like grid system, rows, ready js menus and more.

There's an explanation of how it works:

http://twitter.github.com/bootstrap/javascript.html#dropdowns It doesn't work for me.

Yes, my src links correctly to the JS files.

Try to alter the bootstrap-dropdown.js. It works for me. But I DONT know why... — Wizmann
– Wizmann, Commented Sep 19, 2012 at 1:59

CD.. · Accepted Answer · 2012-08-23 13:41:02Z

4

your missing the body in your html.

put your script at the bottom of the page or after ready:

<script type="text/javascript">
$(function(){
    $('.dropdown-toggle').dropdown();
});
</script>

demo: http://jsfiddle.net/rLL75/

EDIT:

use a newer version of jquery.

edited Aug 23, 2012 at 13:41

answered Aug 23, 2012 at 10:51

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ben Beri Over a year ago

It's still doesn't work. And I can't put the menu inside the body ?

CD.. Over a year ago

@Jony: your missing a <body> tag. are you familiar with html & js?

Ben Beri Over a year ago

Yes mate... I already have a body tag inside my HTML, body tag is placed under it there's my HTML: pastebin.com/MChHWh5f The menu just doesn't pop up on click. I see everything is setup correctly.

CD.. Over a year ago

@Jony: your peace of code works fine for me: jsfiddle.net/rLL75/1 put the header into the body.

Ben Beri Over a year ago

justxp.plutohost.net/testing/index.html this is my site, I put the header class inside the body and still doesn't work, you know what it does? it makes you go back to top. I also tried <header></header> inside the body, and still doesn't work. I really don't know whats wrong with the code. thanks once again!

|

Scott · Accepted Answer · 2012-09-19 08:58:47Z

0

<header>
    <div class="navbar navbar-static header">
        <div class="navbar-inner container">
            <ul class="nav" role="navigation">
               <li class="brand"><span style="color: #bde2e1;">Home</span></li>
               <li class="dropdown">
                   <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                   <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
                       <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>
               </li>
               <li class="hovering"><a href="#">Portfolio</a></li>
               <li class="hovering"><a href="#">Releases</a></li>
               <li class="hovering"><a href="#">Contact</a></li>
           </ul>
           <div id="logo"><a href="#"><img src="img/logo.png" /></a></div>
       </div>
    </div>
</header>

<script type="text/javascript">
    $(function(){
        $('.dropdown-toggle').dropdown();
    });
</script>

edited Sep 19, 2012 at 8:58

Scott

21.6k8 gold badges67 silver badges73 bronze badges

answered Aug 23, 2012 at 13:04

000

3,9404 gold badges27 silver badges40 bronze badges

1 Comment

Ben Beri Over a year ago

Nope man , that just ruins my whole page + still doesn't work.

Collectives™ on Stack Overflow

Bootstrap dropdown doesn't work?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related