JSFiddle - React, Tailwind, and code Playground

by moron

HTML

<menu>
    <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>
    </li>
</menu>

CSS

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

JavaScript

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