JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="#">Раздел1</a></li>
    <li><a href="#">Раздел2</a>
        <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
        </ul>
    </li>
    <li><a href="#">Разде3</a>
        <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
            <li><a href="#">Подраздел4</a></li>
            <li><a href="#">Подраздел5</a></li>
            <li><a href="#">Подраздел6</a></li>
            <li><a href="#">Подраздел7</a></li>
        </ul>
    </li>       
</ul>

CSS

/*Обнуляем отступы*/
ul, li {
    margin:0;
    padding:0;
    list-style-type:none;   
}
 
/*Задаём параметры блока, содержащего основное меню*/
#menu {
    display:block;
    position:absolute;
    top:100px;
    left:50px;         
}
 
/*Задаём стили для разделов нашего меню*/
#menu > li {
    display:inline-block;
    height:20px;
    position:relative;
}
 
/*Стили для скрытого выпадающего меню*/
#menu > li > ul {
    position:absolute;
    top:20px;
    display:none;   
}
 
/*Делаем скрытую часть видимой*/
#menu > li:hover > ul {
    display:block;  
}