Little hack: bootstrapdocs.com navbar example (Bootstrap 3.3)

Question

I'd like to know how to make the dropdown shown on hover instead of on press. Here is the example:

https://bootstrapdocs.com/v3.3.6/docs/examples/navbar/

I did try adding:

.dropdown:hover + dropdown-menu {
 display: block;
}

Didn't work. Any help will be appreciated.

Thanks

Answer 1

There's a bit more to it than the accepted answer. If you also want to highlight the .dropdown-toggle background color, you need a few more lines of CSS.

.navbar-default .navbar-nav > .dropdown:hover > a {
  color: #555;
  background-color: #e7e7e7;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

Without these lines:

Answer 2

.dropdown:hover .dropdown-menu {
  display: block;
}

Can you please try this above method.