JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="javascript:">ABC</a>
        <ol>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ol>
    </li>
    <li><a href="#">DEF</a></li>
    <li><a href="javascript:">GHI</a>
        <ol>
            <li><a href="#">G</a></li>
            <li><a href="#">H</a></li>
            <li><a href="#">I</a></li>
        </ol>
    </li>
    <li><a href="#">JKL</a></li>
    <li><a href="#">MNO</a></li>
</ul>

CSS

ol{display: none;}
.drop
    {
    display: block;
    }

JavaScript

var btn = document.querySelectorAll('ul li a');
    var drp = document.querySelector('ol');
    for(var b = 0; b < btn.length; b++){
      btn[b].onclick = function()
      {
          if(this.parentNode.querySelector('ol') != null){
          	this.parentNode.querySelector('ol').classList.toggle('drop');
          }
      }
    }