Transición de elementos de lista: html, list, css-transitions

Tengo un encabezado que cuando se desplaza sobre el cursor se moverá hacia abajo (#Container) hacia abajo, abriendo el espacio para un menú que aparecerá lentamente también al desplazarse sobre el encabezado.

CSS

#MenuWrapper {
display: block;
position: relative;
width: 979px;
height: 190px;
top: 155px;
margin-top: 5px;
border: #FFF 1px solid;
background: #000;
opacity: 0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 8s;
}

#Header:hover + #Container {
top: 195px;
opacity: 0.3;
}

#Header:hover #MenuWrapper {
opacity: 0.5;
}

HTML

<div id="WrapperPrincipal">

<h id="Header">
<ul id="MenuWrapper">
<li id="Item-L">Login</li>
<li id="Item-R">Register</li>
<li id="Item-D">Download</li>
</ul>
</h>

<div id="Container">
</div>
</div>

Quiero que los elementos aparezcan primero, pero están dentro de la ul, por lo que aparecen al mismo tiempo que toda la lista (porque la animación se aplica a la ul).

¿Cómo hago para que los elementos no se vean afectados por la opacidad? - O tener diferentes niveles de ello. Intenté solicitar solo para la clase de elementos una fuerza de opacidad diferente, pero no funcionó.

Violín.

Respuestas

Creo que obtengo lo que buscas, que cuando el container aparece que quieres el individuo list-item Para mostrar uno por uno.

ul li:nth-child(1){
opacity:0;
-webkit-transition:opacity 10s ease;
}
ul li:nth-child(2){
opacity:0;
-webkit-transition:opacity 20s ease;
}
ul li:nth-child(3){
opacity:0;
-webkit-transition:opacity 30s ease;
}
#Header:hover ul li:nth-child(1) {
opacity: 0.7;
}

#Header:hover ul li:nth-child(2) {
opacity: 0.7;
}
#Header:hover ul li:nth-child(3) {
opacity: 0.7;
}

Ejemplo de violín