Bootstrap 3 dropdown transition

Question

Firstly here\'s the fiddle

Just a regular bootstrap dropdown, I made a few changes to css so that the dropdown appears on hover (instead of click) but how do I want

Answer 1

.dropdown .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition:         all 0.2s  ease;
  -moz-transition:    all 0.2s  ease;
  -webkit-transition: all 0.2s  ease;
  -o-transition:      all 0.2s  ease;
  -ms-transition:     all 0.2s  ease;
}
.dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.dropdown {
  display: inline-block;
}

Just add display:block and visibility:hidden; to .dropdown .dropdown-menu {. Then add visibility: visible to .dropdown:hover .dropdown-menu { and you are done.

You need to change visibility since the opacity of the dropdown menu is 0 but it is still there. You can check this by hovering under your button. By changing the visibility your dropdown menu will only be there when your button gets hovered.