为每个子元素添加转换延迟

Question

我想知道在另一个'a'元素逐渐消失之后如何淡入。例如：'Profile'将淡入，然后1秒后'Experiences'等等。这需要创建列表吗？到目前为止，我已经获得了将它们全部淡化的元素。代码如下。

    .menuitems{
        font-family: pal1;
        font-size: 1rem;
        opacity: 0;
        transition: opacity 1s 999999s;
        transition-timing-function: ease-out;
        position: absolute;
        right: 3%;
        top: 4.4%;
        text-align: right;
    }
    .menu_Title:hover + .menuitems{
        transition-delay: 0.1s;
        opacity: 1;
    }

    <p class="menu_Title"> //menu </p>
    <div class = "menuitems">
        <a href="#">Profile</a><br>
        <a href="#">Experiences</a><br>
        <a href="#">Skills</a><br> 
        <a href="#">Contact</a><br>  
    </div>