Html 列表项转换

我有一个标题，当鼠标悬停在上面时，它会向下移动（#容器）下面的块，打开一个菜单空间，该菜单也会慢慢出现在鼠标悬停在标题上

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）

如何使项目不受不透明度的影响或者有不同的层次。我试着为items类应用不同的不透明度强度，但不起作用

---

我想我得到了您想要的，当

容器出现时，您希望单个
列表项一个接一个地显示出来

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

将此选择器用于列表中的单个
列表项
ul li:n个孩子（1）
我不知道您是否阅读了编辑后的版本，但在写下后，我删除了大约4次，因为我在写的时候找到了答案。我设法为项目提供了不同的动画，但不透明度仍然会影响它们。我不知道选择器对我有什么帮助（只有当我可以将选择器仅应用于ul，并将其留给李的时候）是的，我还没有阅读更新版本。您想要的是，列表首先显示，然后容器将使用
不透明度缓慢显示！更新了小提琴。我认为现在的情况很好。。。虽然如果你知道如何去做，那总是有更多的东西需要知道。问题是，如何防止项目受到不透明度的影响？是的，谢谢！同时，我在探索我实际上喜欢我最终做的事情，所以我将尝试将两者结合起来xD