JSFiddle - React, Tailwind, and code Playground

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

var elem = document.getElementsByTagName('menu')[0];
elem.onclick = function( e ) {
  e = e || event;
  var target = e.target || e.srcElement;
  if(target.tagName == 'LI'){
      alert( target.children[0] );
      alert( target.children[0].style.display=='none' );
    target.children[0].style.display =
        (target.children[0].style.display=='none')?
        'block':'none';
  }
}