Let's recall our dropdown menu's CSS:
/****************Drop Down Menu****************/.has-submenu ul{ position: absolute; top: 70px; background-color: #fff; border-bottom: 1px solid #ada791; border-left: 1px solid #ada791; border-right: 1px solid #ada791; width: 150px; border-radius: 0 0 15px 15px; overflow: hidden; display: none;}.has-submenu a { display: block; padding: 20px 0;}.has-submenu:hover ul { display: block;}
Let's target the hover state of has-submenu as follows:
.has-submenu:hover ul { display: block;}
For now, we'll use use the nonprefixed/W3C standard property names and go back and add the needed prefixes at the end. So, to do an animation, we use animation-name and ...
