Activating Bootstrap Dropdown Menu On Hover

I have some problem with activating bootstrap dropdown menu on hover - it only works on click. Here is the Bootply version: Bootply version Any suggestions what I'm doing wrong?

Solution 1:

Existing Code Solution

To use your existing code, add the following line to your hover listener:

$($(this).data('target')).collapse('show');

Working fork of your bootply: http://www.bootply.com/FRv5lVuiJk

Refactored Code Solution

That being said, there is a more effecient way of doing this using tabs. See http://www.bootply.com/TjqIiOM7Hi for a working example, and the code is below.

HTML

<divclass="container"><navclass="navbar navbar-default"role="navigation"id="topmenu"><ulclass="nav navbar-nav"><liclass="dropdown active"><ahref="#one"data-toggle="tab">One</a></li><liclass="dropdown"><ahref="#two"data-toggle="tab">Two</a></li><liclass="dropdown"><ahref="#three"data-toggle="tab">Three</a></li></ul></nav><navclass="navbar navbar-default right tab-content"role="navigation"id="submenu"><ulclass="nav navbar-nav tab-pane active"id="one"><li><ahref="#"id="">One sub 1</a></li><li><ahref="#"id="">One sub 2</a></li><li><ahref="#"id="">One sub 3</a></li><li><ahref="#"id="">One sub 4</a></li></ul><ulclass="nav navbar-nav tab-pane"id="two"><li><ahref="#"id="">Two sub 1</a></li><li><ahref="#"id="">Two sub 2</a></li><li><ahref="#"id="">Two sub 3</a></li></ul><ulclass="nav navbar-nav tab-pane"id="three"><li><ahref="#"id="">Three sub 1</a></li><li><ahref="#"id="">Three sub 2</a></li></ul></nav></div>

Javascript

$('[data-toggle=tab]').hover(function (e) {
  $(this).click();
});

Solution 2:

You can do this. No JavaScript needed

HTML:

<divclass="dropdown"><buttonclass=""><aclass="">Dropdown</a></button><divclass="dropdown-content"><aclass="dropdown-item">Item 1</a><aclass="dropdown-item">Item 2</a><aclass="dropdown-item">Item 3</a></div></div>

you can obviously change the style to your preference but the code relating to the display is important.

CSS:

/* Dropdown Content (Hidden by Default) */.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px8px16px0pxrgba(0, 0, 0, 0.2);
    z-index: 1;
}
/* Links inside the dropdown */.dropdown-contenta {
    color: black;
    padding: 12px16px;
    text-decoration: none;
    display: block;
}
/* Change color of dropdown links on hover */.dropdown-contenta:hover {
    background-color: #ddd;
}
/* Show the dropdown menu on hover */.dropdown:hover.dropdown-content {
    display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */.dropdown:hover.dropbtn {
    background-color:#6c757d;
}

Just slot in the menu in the position you want along with your bootstrap classes.