title: drop down animation delay not working css
body: <p>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</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>and a block from my html code that I want to have dropdown effect</p>
  
  <pre><code>&lt;div id="nav"&gt;
              &lt;nav class="container"&gt;
                  &lt;ul&gt;    
                      &lt;li&gt;&lt;a href="#jumpnews"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;ANNOUNCEMENTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;OFFICE OF THE DIRECTOR&lt;/a&gt;&lt;/li&gt; 
                      &lt;li style="width: 120px;"&gt;
                          &lt;a href=""&gt;DEPARTMENT &lt;spanclass="arrow"&gt;▼&lt;/span&lt;/a&gt;
                          &lt;ul id="depart"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Information Technology&lt;/a&gt;&lt;/li&gt;
                              &lt;li style="padding-bottom: 5px;"&gt; 
                              &lt;a href="#"&gt;Management Information System&lt;/a&gt; 
                           &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;PROJECT&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;FACULTY&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Hope you can help me with this, I'm self-studying about animation css</p>