I've pasted the code here:
https://jsfiddle.net/JTBennett/sdydw4L6/ [CSS - fadein stuff at the top, nav stuff at the bottom]
but copy+paste the following if you want to see the actual issue in browser...jsfiddle fixes it somehow.
HTML:
<header class="masthead" style="z-index:9999; top:30%;">
<nav>
<div class="nav-container">
<div id="fadein-menu-1">
<input id="slider1" name="slider1" type="checkbox">
<label class="slide has-child" for="slider1">
<span class="element">Vi</span>
<span class="name">V:HCC</span>
</label>
<div class="child-menu">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
<div id="fadein-menu-2">
<a class="slide" href="#">
<span class="element">Cd</span>
<span class="name">Cadence</span>
</a>
</div>
<div id="fadein-menu-3">
<input id="slider2" name="slider2" type="checkbox">
<label class="slide has-child" for="slider2">
<span class="element">Cp</span>
<span class="name">Capture</span>
</label>
<div class="child-menu">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
<a href="#">Option 4</a>
<a href="#">Option 5</a>
<a href="#">Option 6</a>
</div>
</div>
<div id="fadein-menu-4">
<a class="slide" href="#">
<span class="element">Ea</span>
<span class="name">V:EA</span>
</a>
</div>
</header>
CSS:
/* Delayed Fade-In CSS */
#fadein-menu-1 {
opacity:0;
-webkit-animation: fadein 1s ease-in 1s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1s 1 forwards;
}
#fadein-menu-2 {
opacity:0;
-webkit-animation: fadein 1s ease-in 1.2s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1.2s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1.2s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1.2s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1.2s 1 forwards;
}
#fadein-menu-3 {
opacity:0;
-webkit-animation: fadein 1s ease-in 1.4s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1.4s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1.4s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1.4s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1.4s 1 forwards;
}
#fadein-menu-4 {
opacity:0;
-webkit-animation: fadein 1s ease-in 1.6s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1.6s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1.6s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1.6s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1.6s 1 forwards;
}
@keyframes fadein {
{ 0% { opacity:0; } 100% { opacity:1; } }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Navigation */
a {
text-decoration: none;
}
.masthead {
font-family: "Open Sans", sans-serif;
}
nav {
display: table;
position: relative;
table-layout: fixed;
width: 100%;
}
nav input {
display: none;
}
nav label {
margin: 0;
}
nav div.nav-container {
display: table-row;
}
nav div.nav-container > div {
display: table-cell;
}
nav div.nav-container > div:nth-of-type(5n+1) .slide, nav div.nav-container > div:nth-of-type(5n+1) a {
border-color: #186eb5;
}
nav div.nav-container > div:nth-of-type(5n+1) .slide:hover, nav div.nav-container > div:nth-of-type(5n+1) a:hover {
color: #186eb5;
}
nav div.nav-container > div:nth-of-type(5n+1) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+1) a ~ .child-menu {
background-color: #186eb5;
}
nav div.nav-container > div:nth-of-type(5n+1) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+1) .slide.active ~ label {
color: #186eb5;
}
nav div.nav-container > div:nth-of-type(5n+2) .slide, nav div.nav-container > div:nth-of-type(5n+2) a {
border-color: #5aab1e;
}
nav div.nav-container > div:nth-of-type(5n+2) .slide:hover, nav div.nav-container > div:nth-of-type(5n+2) a:hover {
color: #5aab1e;
}
nav div.nav-container > div:nth-of-type(5n+2) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+2) a ~ .child-menu {
background-color: #5aab1e;
}
nav div.nav-container > div:nth-of-type(5n+2) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+2) .slide.active ~ label {
color: #5aab1e;
}
nav div.nav-container > div:nth-of-type(5n+3) .slide, nav div.nav-container > div:nth-of-type(5n+3) a {
border-color: #db0a21;
}
nav div.nav-container > div:nth-of-type(5n+3) .slide:hover, nav div.nav-container > div:nth-of-type(5n+3) a:hover {
color: #db0a21;
}
nav div.nav-container > div:nth-of-type(5n+3) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+3) a ~ .child-menu {
background-color: #db0a21;
}
nav div.nav-container > div:nth-of-type(5n+3) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+3) .slide.active ~ label {
color: #db0a21;
}
nav div.nav-container > div:nth-of-type(5n+4) .slide, nav div.nav-container > div:nth-of-type(5n+4) a {
border-color: #6926b8;
}
nav div.nav-container > div:nth-of-type(5n+4) .slide:hover, nav div.nav-container > div:nth-of-type(5n+4) a:hover {
color: #6926b8;
}
nav div.nav-container > div:nth-of-type(5n+4) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+4) a ~ .child-menu {
background-color: #6926b8;
}
nav div.nav-container > div:nth-of-type(5n+4) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+4) .slide.active ~ label {
color: #6926b8;
}
nav div.nav-container > div:nth-of-type(5n+5) .slide, nav div.nav-container > div:nth-of-type(5n+5) a {
border-color: #FC1DCF;
}
nav div.nav-container > div:nth-of-type(5n+5) .slide:hover, nav div.nav-container > div:nth-of-type(5n+5) a:hover {
color: #b1028d;
}
nav div.nav-container > div:nth-of-type(5n+5) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+5) a ~ .child-menu {
background-color: #fd4fda;
}
nav div.nav-container > div:nth-of-type(5n+5) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+5) .slide.active ~ label {
color: #FC1DCF;
}
nav a, nav label {
-moz-transition-property: color;
-o-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
nav .slide {
padding: 10px 10px;
font-size: 1em;
display: block;
color: #393939;
border-top: 4px solid transparent;
position: relative;
-moz-transition-property: border-width, color;
-o-transition-property: border-width, color;
-webkit-transition-property: border-width, color;
transition-property: border-width, color;
-moz-transition-duration: 0.1s, 0.2s;
-o-transition-duration: 0.1s, 0.2s;
-webkit-transition-duration: 0.1s, 0.2s;
transition-duration: 0.1s, 0.2s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-moz-transition-delay: 0.2s, 0s;
-o-transition-delay: 0.2s, 0s;
-webkit-transition-delay: 0.2s, 0s;
transition-delay: 0.2s, 0s;
}
nav .slide .element {
font-size: 1.25em;
font-weight: 600;
font-style: normal;
display: block;
line-height: 1;
}
nav .slide .name {
font-size: 0.6875em;
position: relative;
}
nav .has-child .name:after {
content: "";
width: 10px;
height: 4px;
background-image: url("http://www.elemental-shift.com/remote-assets/down-arrow.svg");
display: block;
position: absolute;
bottom: -9px;
left: 1px;
background-repeat: no-repeat;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
nav .child-menu {
display: block;
position: absolute;
max-height: 0;
overflow: hidden;
background-color: #393939;
width: 100%;
top: 65px;
left: 0;
z-index: 5000;
-moz-transition-property: max-height;
-o-transition-property: max-height;
-webkit-transition-property: max-height;
transition-property: max-height;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
nav .child-menu a {
color: white;
display: inline-block;
padding: 15px 30px 15px 10px;
font-size: 0.9375em;
}
nav input:checked ~ .child-menu {
max-height: 100px;
-moz-transition-property: max-height;
-o-transition-property: max-height;
-webkit-transition-property: max-height;
transition-property: max-height;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
nav input:checked ~ .has-child .name:after {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
@media only screen and (min-width: 48.0625em) {
nav {
display: block;
table-layout: auto;
}
nav div.nav-container {
display: block;
}
nav div.nav-container > div {
display: block;
margin: 5px 0;
}
nav div.nav-container > div:hover .slide {
border-left-width: 55px;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
nav .slide {
display: block;
width: auto;
border-left: solid 4px #393939;
border-top: none;
}
nav .slide .element {
line-height: 1;
}
nav .child-menu {
display: block;
position: relative;
top: 0;
background-color: transparent !important;
margin-left: 55px;
width: auto;
max-height: 0px;
overflow: hidden;
border-top: none;
}
nav .child-menu a {
color: #393939;
display: block;
padding: 3px 0 3px 10px;
font-size: 0.8125em;
}
nav input:checked ~ div.child-menu {
max-height: 120px;
}
nav input:checked ~ .slide {
border-width: 55px;
}
.masthead {
position: absolute;
top: 0;
left: 0;
width: 150px;
}
}
It actually works just fine in jsfiddle, but when I run it in my browser there's an issue with the child menu in the default full-size position (top-aligned) remaining at 0 opacity. It's the same in Chrome and Safari, and nearly certain it's an issue with the opacity not resolving itself after the animation commands, but it just seems strange that it only happens with the default child menu. If you remove the opacity:0; lines from the #fadein-menu-1/2/3/4 IDs, the submenu works again.
I feel like I'm just missing one blatant, stupid little thing...but I cannot find it for the life of me. Would really appreciate some help here.
The problem:
animation: fadein 1s ease-in 1.4s 1 forwards;
You are trying to fade-in the element which has opacity:0;. Your animation runs once it means the element fades-in and then the element return to the default style(opacity:0;). So you can not see those elements.
Solution: remove opacity from default style.
#fadein-menu-1 {
/* Remove from all the elements */
//opacity:0;
-webkit-animation: fadein 1s ease-in 1s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1s 1 forwards;
}