I am facing an issue with the animation in my dropdown list. The animation is only applying to the text within the ul list instead of the entire list item blocks.
Here is how it should function
This link contains the incorrect code
li:hover > ul.dropdown-content a:nth-child(1) {
animation-name: menu1;
animation-duration: 300ms;
animation-delay: 0ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
li:hover > ul.dropdown-content a:nth-child(2) {
animation-name: menu1;
animation-duration: 300ms;
animation-delay: 50ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
li:hover > ul.dropdown-content a:nth-child(3) {
animation-name: menu1;
animation-duration: 300ms;
animation-delay: 100ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes menu1 {
0% {
opacity: 0;
transform: rotateY(-90deg) translateY(30px);
}
80% {
transform: rotateY(10deg);
}
100% {
opacity: 1;
transform: rotateY(0deg) translateY(0px);
}