Moving the Bootstrap 3 drop-down list

Question

Firstly, here is the fiddle

Just a popup boot menu, I made a few changes to css so that the popup menu appears on hover (instead of a click), but as I need a very simple fading animation. I tried the css transition, but that did not work because the .dropdown-menu element has "display: none" applied to it when I hover it to change to "display: block". How can I animate an element that changes from "diplay: none" to "display: block" or is there any other way to do this?

I already looked for it and found out some answer, but they did not help.

HTML code:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> 

CSS code:

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

Answer 1

You can override the default display style: none with display: block, since you also use opacity: 0 to hide the menu. Try the following CSS example and see if it does what you need. I updated the transition speed to make the effect more noticeable.

 .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 violin: http://jsfiddle.net/pjej7o2m/1/

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

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

Updated script: 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; at .dropdown .dropdown-menu { . Then add visibility: visible to .dropdown:hover .dropdown-menu { , and you .dropdown:hover .dropdown-menu { done.

You need to change the visibility since the opacity of the dropdown menu is 0, but it is still there. You can check this by moving the cursor under the button. By changing the visibility, the drop-down menu will only be there when your button hangs.