Bootstrap dropdown doesn't work

Question

So, I know this is a common question, but I've tried everything and can't get it to work. When I click on it nothing happens. Bootstrap and JQuery load.
JFiddle: http://jsfiddle.net/qqS4F/
Code:

<div class="navbar-wrapper">
        <div class="container">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- /.btn -->
                    <a class="brand" href="#">S&J Bakery</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#about">About</a>
                            </li>
                            <li class="dropdown" id="#dd">
                                <a href="#dd" class="dropdown-toggle" data-toggle="dropdown" role="button">
                                    Menu
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li href="#lunch">Lunch</li>
                                    <li class="divider"></li>
                                    <li href="#cake">Cake</li>
                                </ul>
                            </li>
                            <li>
                                <a href="#contact">Contact Us</a>
                            </li>
                            <li>
                                <a href="#sponsers">Sponsers</a>
                            </li>
                        </ul>
                        <!-- /.nav -->
                    </div>
                    <!-- ./nav-collapse -->
                </div>
                <!-- /.navbar-inner -->
            </div>
            <!-- /.navbar navbar-inverse -->
        </div>
        <!-- /.container -->
    </div>
    <!-- /.navbar-wrapper -->

Answer 1

Tips48,

It looks like you are using a version of the bootstrap css file that doesn't account for dropdown menus. I've updated the fiddle with the correct items and it is working properly for me (see screenshot below):

In case you need the link to the css file, here it is. Also, you can grab the latest version from the main site at http://twitter.github.io/bootstrap/index.html One nice feature is the "Customize" section, where you can tweak what you want/don't want in your project. Hopefully this helps.

Good luck and have fun!