Twitter Bootstrap drop down menu is not working

Question

I have included twitter bootstrap css and js files, and then using the following Javascript code, I want to applyn drop down effect to the the HTML markup. But it does not work, neither does show any error in console. Please helpe me.

I have included:

<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap-responsive.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/game/public/css/bootstrap.min.css">

<script src="http://localhost/game/public/js/bootstrap.min.js"></script>
<script src="http://localhost/game/public/js/bootstrap-datepicker.js"></script>

And this is the Javascript:

<script type="text/javascript">
    $(document).ready(function(){
       $('.nav').dropdown(); 
});

</script>

And this is the Markup:

<ul class='nav nav-pills pullright'>

    <li class="btn btn-navbar"><a href="{{ action('user_home') }}">خانه کاربری</a></li>
    <li class="btn btn-navbar"><a class="dropdown-toggle" href="#">سفارش جدید</a>
        <ul class="dropdown-menu nav-collapse">
            <li class="btn btn-navbar"><a href="{{ action('user_order_new', array('step'=>1, 'action'=>'new') ) }}">سفارش بازی</a>
                <ul>
                   <li class="btn btn-navbar"><a href="{{ action('user_order_new', array('step'=>1, 'action'=>'new', 'parent'=>'GOCS') ) }}">Counter Strike</a> 
                </ul>
            <li>
        </ul>
    </li>
    <li class="btn btn-navbar"><a href="{{ action('game_order') }}">سفارش بازی</a></li>
    <li class="btn btn-navbar"><a href="{{ action('user_order_listing') }}">فهرست سفارش ها</a></li>
    <li class="btn btn-navbar" ><a href="{{ action('payments') }}">فهرست پرداخت ها</a></li>
    <li class="btn btn-navbar"><a href="{{ action('user_offline_payment') }}">ثبت فیش پرداختی</a></li>
    <li class="btn btn-navbar"><a href="{{ action('user_edit') }}">حساب کاربری</a></li>
    <li class="btn btn-navbar"><a href="{{ action('pass_change') }}">تغییر رمز عبور</a></li>
    <li class="btn btn-navbar"><a href="{{ action('logout') }}">خروج</a></li>
</ul>

Answer 1

You don't need any javascript, just include the bootstrap css and js files in your pages.

You can see an example of the dropdown component here :

http://getbootstrap.com/components/#btn-dropdowns