リスト項目遷移 - html、list、css-transitions

マウスオーバーすると下のブロック（#Container）が下に移動し、マウスオーバーしたときにもゆっくり表示されるメニュー用のスペースを開くヘッダーがあります。

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>

私はアイテムを最初に出現させたいのですが、それらは "アニメーションがulに適用されているので）それらがリスト全体と同時に出現するように" ulの中にあります。

アイテムが不透明度の影響を受けないようにするにはどうすればよいですか。 - またはそれの異なるレベルがあります。私はアイテムクラスだけに異なる不透明度を適用しようとしましたが、うまくいきませんでした。

フィドル

回答：

私はあなたが探しているものを手に入れたと思う。 container あなたは個人が欲しいようです list-item 一つ一つ見せるために。

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;
}

フィドルの例