Bootstrap how to set the drop-down menu does not click, change to mouse hover direct display drop-down menu

Method One:

Actually relatively simple, only need to add a CSS settings under the hover state, the drop-down menu is set to block, specific CSS:
.nav
 > li:hover .dropdown-menu {display: block;}


But the main navigation loses the link effect!

Method Two:

Not only can solve the problem of Bootstrap mouse hover, also can let a menu restore link implementation click
The drop-down menu effect is JS implementation, analysis Bootstrap.js file discovery, bootstrap the drop-down menu as a jquery plugin, in the dropdown code snippet found a key sentence:
$(document)
    .on(‘click.bs.dropdown.data-api‘, clearMenus)
    .on(‘click.bs.dropdown.data-api‘, ‘.dropdown form‘, function (e) { e.stopPropagation() })
    .on(‘click.bs.dropdown.data-api‘  , toggle, Dropdown.prototype.toggle)
    .on(‘keydown.bs.dropdown.data-api‘, toggle + ‘, [role=menu]‘ , Dropdown.prototype.keydown)

It is good to close the Click.bs.dropdown.data-api event, the code is as follows:
$(document).ready(function(){
    $(document).off(‘click.bs.dropdown.data-api‘);
});

This allows the first-level menu to restore the href attribute, which functions as a hyperlink.

As for the drop-down menu suspension, the mouse is placed on the display, according to the method above the good. or use JS to achieve:
$(document).ready(function(){
    dropdownOpen();//调用
});
/**
 * 鼠标划过就展开子菜单，免得需要点击才能展开
 */
function dropdownOpen() {

    var $dropdownLi = $(‘li.dropdown‘);

    $dropdownLi.mouseover(function() {
        $(this).addClass(‘open‘);
    }).mouseout(function() {
        $(this).removeClass(‘open‘);
    });
}

Bootstrap how to set the drop-down menu does not click, change to mouse hover directly display drop-down menu