[Solved] Dropdown menu effect [closed]


Pure css solution is CSS(3) transitions.

http://jsfiddle.net/9gjbfvwy/

use width and height 0, with overflow hidden.
Use CSS3 transitation to set them to auto.

See fiddle (it’s your code, with 3 additions)

ul.sub-menu{height:0;width:0;overflow:hidden;}
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;}
ul.sub-menu {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

3

solved Dropdown menu effect [closed]