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

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