JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='mainMenus'> 
                    <li onclick='showSubMenu(&quot;sm_item1&quot;)'>  
                     <a style='cursor:auto;font-size:15px; font-family:Segoe,Arial,sans-serif; color:Green; text-decoration:none' href="#open">Nhấn vào đây để mở menu</a>
                          <ul class='subMenus' id='sm_item1'> 
                              Một menu được mở ra.
                          </ul>
                     <div>
                    </li>
                 </ul>

CSS

ul { 
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
list-style-type: none} 
  
.mainMenus li { 
position: relative} 
  
.subMenus { 
display: none; 
position: absolute; 
top: 20px; 
left: 0px;
}

JavaScript

window.onload=function() { 
 subMenusO = getElementsByClassName(document,'ul','subMenus'); 
} 
function showSubMenu(elemId) { 
 var dispStatus = (document.getElementById(elemId).style.display == 'block')? 'none' : 'block'; 
 for(var i=0; i < subMenusO.length; i=i+1) { 
     subMenusO[i].style.display = 'none'; 
    } 
    document.getElementById(elemId).style.display = dispStatus; 
} 
function getElementsByClassName(oElm, strTagName, strClassName){ 
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); 
    var arrReturnElements = new Array(); 
    strClassName = strClassName.replace(/\-/g, "\\-"); 
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); 
    var oElement; 
    for(var i=0; i<arrElements.length; i++) 
    { 
        oElement = arrElements[i]; 
        if(oRegExp.test(oElement.className)) 
        { 
            arrReturnElements.push(oElement); 
        } 
    } 
    return (arrReturnElements) 
}