If you implemented bootstrap into your WordPress template and want to add CSS transitions to drop-down menu, you can use the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@media (min-width: 768px) { .dropdown .dropdown-menu{ display: block; opacity:0; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in; } .dropdown:hover .dropdown-menu { display: block; opacity: 1; } } |
Why media queries? Because you don’t want display:block on hover on the mobile menu (as the hover used for this would double the submenu). As for CSS transitions, you can generate them using any of the online generators, such as this one.