Dropdown On Hover For Bootstrap Navbar

I was looking for a solution that the items of a bootstrap navbar will dropdown on mouse over.

And the items that opens a submenu should work onClick if the url is not ‘#’.

I have found a lot of discussion/snippets, but only a few worked for me.

The quintessence - maybe it’s useful for one of you:


     * A script that modifies bootstrap navbar to dropdown on mouse over.

     * And a parent of a submenu will be responsive to onClick if the assigned url is not '#'.


    public static function registerDropDownOnHoverScript($slideDown=300,$slideUp=200,$position=CClientScript::POS_READY)


        $script = <<<EOP

                $('.navbar li.dropdown').hover(

                     function() { $(this).find('.dropdown-menu').first().stop(true, true).slideDown($slideDown); },

                     function() { $(this).find('.dropdown-menu').first().stop(true, true).slideUp($slideUp); }


                $('.navbar li.dropdown > a').click(function(){ if(this.href) location.href = this.href; });

                $('.navbar li.dropdown-submenu > a').click(function(){ if(this.href) location.href = this.href; });


        $css = '.dropdown-menu{margin: 0 2px 0 0;}'; //correction of the bottom margin