Bootstrap drop down menu in Joomla 3.1 -

i'm working bootstrap menu working dropdowns should in joomla 3.1. i'm there, not quite: js script use (how make twitter bootstrap menu dropdown on hover rather click)

 <script type="text/javascript">    (function($){        $(document).ready(function(){      $('.dropdown-toggle').dropdown();       // dropdown       $('.parent').addclass('dropdown');       $('.parent > a').addclass('dropdown-toggle');       $('.parent > a').attr('data-toggle', 'dropdown');      $('.parent > a').attr('data-target', '#');       $('.parent > a').append('<b class="caret"></b>');       $('.parent > ul').addclass('dropdown-menu');      $('.nav-child .parent').removeclass('dropdown');      $('.nav-child .parent .caret').css('display', 'none');       $('.nav-child .parent').addclass('dropdown-submenu');     });   })(jquery); </script> 

the css (http://forum.joomla.org/viewtopic.php?f=706&t=770153)

.dropdown-menu .sub-menu {     left: 100%;     position: absolute;     top: 0;     visibility: hidden;     margin-top: -1px; }  .dropdown-menu li:hover .sub-menu {     visibility: visible; }  .dropdown:hover .dropdown-menu {     display: block; }  .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {     margin-top: 0; }  .navbar .sub-menu:before {     border-bottom: 7px solid transparent;     border-left: none;     border-right: 7px solid rgba(0, 0, 0, 0.2);     border-top: 7px solid transparent;     left: -7px;     top: 10px; } .navbar .sub-menu:after {     border-top: 6px solid transparent;     border-left: none;     border-right: 6px solid #fff;     border-bottom: 6px solid transparent;     left: 10px;     top: 11px;     left: -6px; } 

this works excellent, 1 thing corrected: link in menubar works show menu under it. need toplink working well. how can that?

unfortunately because need "click" on top menu item display drop-down below cannot have link on item must me set href="#" otherwise everytime clicked reload page , not display drop-down. if setup works menu display when "hovered" , doesnt require click remove

$('.parent > a').attr('data-target', '#'); 

from javascript , leave link intact on menu item (assuming have correctly set menu items type correctly.

hope helps

out of completeness use following on joomla 3.2

jquery(document).ready(function(){          // dropdown          jquery('.parent').addclass('dropdown');         jquery('.parent > a').addclass('dropdown-toggle');         jquery('.parent > a').attr('data-toggle', 'dropdown');         jquery('.nav > .parent > a').attr('href','#');         jquery('.parent > a').append('<span class="caret"></span>');         jquery('.parent > ul').addclass('dropdown-menu');         jquery('.nav-child .parent').removeclass('dropdown');         jquery('.nav-child .parent').addclass('dropdown-submenu');         jquery('.dropdown-submenu > a').removeattr('class');         jquery('.dropdown-submenu > a').removeattr('data-toggle', 'dropdown');         jquery('.dropdown-submenu > > span').remove();     }); 

i havent need customise css exception of changing colours css in template.css refers navbar layout of customizing visual info not affecting dropdowns. /* customize navbar links fill entire space of .navbar */

.navbar .navbar-inner {     padding: 0;     font: arial; } /* .navbar .nav {         margin: 0;         display: table;         width: 100%;*/ } .navbar .nav li {     display: table-cell;     width: 1%;/*        float: none;*/ } .navbar .nav li {     text-align: center;     border-left: 1px solid rgba(255,255,255,.75);     border-right: 1px solid rgba(0,0,0,.1); } .navbar .nav li:first-child {     border-left: 0;     border-radius: 3px 0 0 3px; } .navbar .nav li:last-child {     border-right: 0;     border-radius: 0 3px 3px 0; } 

lev