drop down animation delay not working css

Question

I'm just following a video tutorial and I modify some codes, but after I modify it, the animation delay is not working for my drop down here is the dropdwon block code for css

#nav ul li:hover #depart li{
    animation: load .1s forwards; 
    display: block;
}
@keyframes load{
   0%{
        transform: translateX(25px);
 }
   100%{
        opacity: .9;
        transform: translateX(0px);
 }
}
#depart li :first-child{
    animation-delay: .5s;
}
#depart li :nth-child(1){
    animation-delay: 1s;
}

and a block from my html code that I want to have dropdown effect

<div id="nav">
            <nav class="container">
                <ul>    
                    <li><a href="#jumpnews">NEWS</a></li>
                    <li><a href="#">ANNOUNCEMENTS</a></li>
                    <li><a href="#">OFFICE OF THE DIRECTOR</a></li> 
                    <li style="width: 120px;">
                        <a href="">DEPARTMENT <spanclass="arrow">▼</span</a>
                        <ul id="depart">
                            <li><a href="#">Information Technology</a></li>
                            <li style="padding-bottom: 5px;"> 
                            <a href="#">Management Information System</a> 
                         </li>
                        </ul>
                    </li>
                    <li><a href="#">PROJECT</a></li>
                    <li><a href="#">FACULTY</a></li>
                </ul>
            </nav>
        </div>

Hope you can help me with this, I'm self-studying about animation css

Answer 1

#nav ul li:hover #depart li{
    animation: load 1s both; 
    display: block;
}
@keyframes load{
   0%{
        transform: translateX(250px);
        opacity: 0;
 }
   100%{
        opacity: .9;
        transform: translateX(0px);
 }
}
#nav ul li #depart li:first-child { 
    animation-delay: 0.5s ;
  
}

#nav ul li #depart li:nth-child(2){
    animation-delay: 1s;
}

<div id="nav">
  <nav class="container">
    <ul>
      <li><a href="#jumpnews">NEWS</a></li>
      <li><a href="#">ANNOUNCEMENTS</a></li>
      <li><a href="#">OFFICE OF THE DIRECTOR</a></li>
      <li style="width: 120px;">
        <a href="">DEPARTMENT <span class="arrow">▼</span></a>
        <ul id="depart">
          <li><a href="#">Information Technology</a></li>
          <li style="padding-bottom: 5px;">
            <a href="#">Management Information System</a>
          </li>
        </ul>
      </li>
      <li><a href="#">PROJECT</a></li>
      <li><a href="#">FACULTY</a></li>
    </ul>
  </nav>
</div>