JSFiddle - React, Tailwind, and code Playground

HTML

<body>
      <div>
      <ul class="menu">
        <li>уровень1
        <ul>
        <li>уровень2</li>    
        <li>уровень2</li>    
        </ul>
        </li>
        <li>уровень1
        <ul>
        <li>уровень2</li>    
        <li>уровень2</li>    
        </ul>
        </li>    
      </ul>
 
      </div>
    </body>

CSS

*{
    box-sizing: border-box;
}

div{
    width: 90%;
    margin: 25px auto;
    border: 5px solid yellow;
}
.menu{
    padding: 0;
    margin: 0;
    border: 5px solid green;
    list-style-type: none;
}
.menu  li{
    border:1px solid orange;
    
}
.menu  li ul{
    border: 1px solid red;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: none;
    
}

.menu li:hover ul{
    display: block;
}