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

You can override the default style of display:none with display:block, since you're also using opacity:0 to hide the menu. Give the following CSS a try and see if that accomplishes what you need. I've updated the transition speed to make the effect more apparent.

.dropdown .dropdown-menu{
    display: block;
    opacity: 0;

    -moz-transition:    all 1000ms ease;
    -webkit-transition: all 1000ms ease;
    -o-transition:      all 1000ms ease;
    -ms-transition:     all 1000ms ease;
    transition:         all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

Updated version of your fiddle: http://jsfiddle.net/pjej7o2m/1/

Here's a jQuery script that might work as an alternative to hovering over the div (still using the css transition properties for opacity)

$(function(){
  var $menu = $('.dropdown-menu');

  $('.dropdown-toggle').hover(
    function() {
      $menu.css('opacity',1);
    },
    function() {
      $menu.css('opacity',0);
    });
})();

Updated fiddle: http://jsfiddle.net/pjej7o2m/2/

Answer 2

.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.