JSFiddle - React, Tailwind, and code Playground

HTML

<menu>
    <li>О нас</li>
    <ul>
       <li>1</li>
       <li>2</li>
    </ul>
    <li>Ананас</li>
    <ul>
       <li>1</li>
       <li>2</li>
    </ul>
    <li>Не о нас</li>
    <ul>
       <li>1</li>
       <li>2</li>
    </ul>
</menu>

CSS

menu {  
 margin: 0px; 
 width: 100%;
 background-color: red;   
}
menu li {
 border-bottom: 1px solid black;
 list-style-type: none;    
}
menu li ~ ul {
 background-color:blue;
 margin-left: 10px;
 display: none;   
}

JavaScript

var elem = document.getElementsByTagName('menu');
for (var i=0; i<elem.children.length; i++) {
    if(elem.children[i].tagName=='LI'){
           elem.children[i].addEventListener( "click" ,
                                   function () {
                                     menu.children[i+1].style.display = 
                                         (menu.children[i+1].style.display == 'none') ?
                                         'block' : 'none';
                                   },
                                   false) 
    
        }                    
    }
 }