CSS transition not working at drop down - html

Question

I am using the code of this page:
https://codepen.io/shshaw/pen/gsFch
Now, my CSS looks like:
.subs {
visibility: hidden;
opacity: 0;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
width: auto;
float: left;
position: absolute;
text-align: left;
border: 2px solid #66ec95;
background: #f4f7f5;
border-radius: 0 5px 5px 5px;
margin-top: -10px;
margin-left: -10px;
}
/* SELECTORS */
#nav li:hover > .subs { /* with this seletor, only the last property is working */
visibility: visible;
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
margin-top: 10px; /* just for test, only this is working */
}
#nav li :hover + .subs { /* this time, the animation are working but other problems occured (see above) */
visibility: visible;
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
}
My HTML:
<ul id="nav">
<li aria-haspopup="true">
Services
<div class="subs" id="service-subs" aria-haspopup="false">
Product List<br />
Projects<br />
</div>
</li>
... and so on
So, the second selector for .subs displays the animation but it breaks when I move my cursor into .subs and it's also interrupted many times on displaying because of cursor detects .subs while showing the menu.
Furthermore, I can't understand why does it work with sibling selector when .subs is a child of #nav li.
What am I doing wrong?
Thanks!

Answer 1

I am not 100% sure on the issue of why your code wasn't working. I did re-write it to try to get what you were going for using some methods I think are easier to work with.
Utilizing #keyframes is a great way to build your application with reusable chunks of code.
Utilizing translate3d will tap into the GPU of a computer/device for smoother translations.
Please note I did not take the time to add an HTML wrapper that would hide the drop down menus as they fall. This would easily be done by wrapping the entire menu in a div and setting the overflow to hidden.
I apologize I couldn't help you learn more of why you were getting the bug you had.
.sub-menu-parent {
position: relative;
}
.sub-menu {
position: absolute;
width: 100%;
display: none;
z-index:-1;
}
.sub-menu-parent:hover .sub-menu {
display: block;
animation: 1s slideDown forwards;
}
#keyframes slideDown {
0% {
transform: translate3d(0px, -200px, 0px);
opacity: 0;
z-index:-1;
}
99% {
transform: translate3d(0px, 0px, 0px);
opacity: 1;
z-index:-1;
}
100% {
z-index:0;
}
}
/* presentational */
body {
font: 18px/1.4 sans-serif;
}
nav a {
color: #E00;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
nav a:hover {
color: #F55;
}
nav ul, nav ul li {
list-style-type: none;
padding: 0;
margin: 0;
}
nav > ul {
background: #EEE;
text-align: center;
}
nav > ul > li {
display: inline-block;
border-left: solid 1px #aaa;
}
nav > ul > li:first-child {
border-left: none;
}
.sub-menu {
background: #DDD;
}
<nav>
<ul>
<li class="sub-menu-parent">
Menu Item 1
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li class="sub-menu-parent">Menu Item 2
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
<li>Sub Item 6</li>
</ul>
</li>
<li class="sub-menu-parent">Menu Item 3
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul></li>
</ul>
</nav>