JSFiddle - React, Tailwind, and code Playground

HTML

<menu>
<ul id="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>
<ul>
</menu>
<div id="debug">
    </div>

CSS

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