JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>
        Пункт #1
        <ul class="under-menu">
            <li>Подпункт 1</li>
            <li>Подпункт 2</li>
            <li>Подпункт 3</li>
            <li>Подпункт 4</li>
            <li>Подпункт 5</li>
        </ul>
    </li>
    <li>
        Пункт #2
        <ul class="under-menu">
            <li>Подпункт 1</li>
            <li>Подпункт 2</li>
            <li>Подпункт 3</li>
            <li>Подпункт 4</li>
            <li>Подпункт 5</li>
        </ul>
    </li>
    <li>
        Пункт #3
        <ul class="under-menu">
            <li>Подпункт 1</li>
            <li>Подпункт 2</li>
            <li>Подпункт 3</li>
            <li>Подпункт 4</li>
            <li>Подпункт 5</li>
        </ul>
    </li>
    <li>
        Пункт #4
        <ul class="under-menu">
            <li>Подпункт 1</li>
            <li>Подпункт 2</li>
            <li>Подпункт 3</li>
            <li>Подпункт 4</li>
            <li>Подпункт 5</li>
        </ul>
    </li>
    <li>
        Пункт #5
        <ul class="under-menu">
            <li>Подпункт 1</li>
            <li>Подпункт 2</li>
            <li>Подпункт 3</li>
            <li>Подпункт 4</li>
            <li>Подпункт 5</li>
        </ul>
    </li>
</ul>

CSS

.menu li:hover .under-menu{
    display:block;
}
.menu li:hover,.under-menu li:hover{
    background:#ddd;
    cursor:pointer;
}
.menu,.menu li,.under-menu li{
    display:block;
    padding:0;
    margin:0;
    height:20px;
}
.menu,.under-menu{
    border:1px solid #000;
}
.menu li{
    list-style:none;
    float:left;
    padding:0 10px;
    border-right:1px solid #000;
    position:relative;
}
.under-menu{
    position:absolute;
    top:20px;
    left:-1px;
    width:100px;
    display:none;
}
.under-menu li{
    padding:3px 10px;
    border-right:none;
    border-bottom:1px solid #000;
    margin-bottom:-1px;
    float:none;
}