CSS drop down menu isn't animating - css

Question

I'm trying to learn how to animate with CSS in a DevTips Tutorial but had to stop about 8-minutes in since my code isn't animating the menu items properly. They simply pop into place, but are supposed to flip and fade in simultaneously.
I hope it isn't taboo to post something that's been written at CodePen; my sincerest apologies if it is. If it's kosher, CLICK HERE.
As far as I can tell, my code matches exactly what's in the tutorial, so I was hoping someone could spot whatever error I'm overlooking.
Achtung!! My codepen syntax is using Pug and SASS preprocessors, so if you don't like looking at that kind of syntax, the compiled HTML and CSS is included below.
Many thanks in advance.
HTML ::
<nav>
<ul>
<li>style 1
<ul class="drop-menu menu-#{i}">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
</ul>
</li>
<li>style 2
<ul class="drop-menu menu-#{i}">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
</ul>
</li>
<li>style 3
<ul class="drop-menu menu-#{i}">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
</ul>
</li>
<li>style 4
<ul class="drop-menu menu-#{i}">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
</ul>
</li>
</ul>
</nav>
CSS ::
nav {
padding: 50px;
text-align: center;
}
nav > ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
background: #ddd;
border-radius: 5px;
}
nav > ul > li {
float: left;
width: 150px;
height: 65px;
line-height: 65px;
position: relative;
text-transform: uppercase;
font-size: 14px;
color: DarkGray;
color: rgba(0, 0, 0, 0.7);
cursor: pointer;
}
nav > ul > li:hover {
background: #d5d5d5;
border-radius: 5px;
}
ul.drop-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 0;
}
ul.drop-menu li {
background: #666;
color: White;
color: rgba(255, 255, 255, 0.7);
}
ul.drop-menu li:hover {
background: #606060;
}
ul.drop-menu li:last-child {
border-radius: 0 0 5px 5px;
}
ul.drop-menu li {
display: none;
}
li:hover > ul.drop-menu li {
display: block;
}
li:hover > ul.drop-menu.menu-1 {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li:hover > ul.drop-menu.menu-1 li {
opacity: 0;
-webkit-animation-name: menu1;
animation-name: menu1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes menu1 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) translateY(30px);
transform: rotateY(-90deg) translateY(30px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateY(0px);
transform: rotateY(0deg) translateY(0px);
}
}
#keyframes menu1 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) translateY(30px);
transform: rotateY(-90deg) translateY(30px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateY(0px);
transform: rotateY(0deg) translateY(0px);
}
}

Answer 1

Looks like you have a very simple problem with your Pug processing in this line:
ul(class="drop-menu menu-#{i}")
This isn't adding the class "menu-1" through "menu-4" as expected. To fix this write the Pug statement like this instead:
ul(class="drop-menu menu-" + i)
This is the new syntax that Pug specifies using, you can read more here.