Animacja w rozwijanym menu

Witajcie!
drodzy dżentelmeni, proszę o pomoc w dodaniu animacji do rozwijanego menu opartego o ul/li. Mam następujący kod:

<style>

ul li ul
{
  display:none
}

li ul
{
  padding-left:0;
  transition:all 1s
}

li.opened ul
{
  display:block;
  padding-left:25px;
}
</style>


<ul>
  <li>AAA</li>
  <li class="has_child">OPEN ME

    <ul>
      <li>BBB</li>
      <li>BBB</li>
      <li>BBB</li>
      <li>BBB</li>
      <li>BBB</li>
    </ul>

  </li>
  <li>AAA</li>
  <li>AAA</li>
  <li>AAA</li>
</ul>



<script>

  let els = document.getElementsByClassName('has_child');
  
  
  for (var i = 0; i < els.length; i++)
  {
    var el = els[i];
  
    el.addEventListener('click', function()
    {
      this.classList.toggle('opened');
  
    }, false);
  
  
  }
  
  </script>

Który niestety nie działa, tj. menu otwiera się, ale animacja zmiany padding-left z 0 na 25px

Nie działa, ponieważ wcześniej było display: none. Trzeba dodać drugi poziom otwierania, na przykład tak: https://codepen.io/overcq/pen/eYaEVzX .