JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<section>
    <ul class="menu">
        <li><a href="#">Меню</a>
            <ul class="submenu">
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
            </ul>
        </li>
        <li><a href="#">Меню</a>
            <ul class="submenu">
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
            </ul>
        </li>
        <li><a href="#">Меню</a>
            <ul class="submenu">
                <li><a href="#">Субменю</a></li>
                <li><a href="#">Субменю</a></li>
            </ul>
        </li>
    </ul>
</section>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    padding: 50px;
}

.menu {
    border: 2px solid #B18552;
    width: 300px;
    overflow: hidden;
    text-align: center;
    background: #00f;
    border-radius: 30px;
}

.menu > li + li {
    border-top: 2px solid #B18552;
}

.menu a {
    text-decoration: none;
    color: #E5E2E2;
    padding: 15px 0;
    display: block;
}

.menu>li>a {
    font-size: 25px;
    transition: all .5s ease;
}

.submenu {
    background: gray;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height .3s cubic-bezier(0, 1, 0, 1);
}

.submenu>li+li {
    border-top: 2px solid #E5E2E2;
}

.submenu a {
    font-size: 20px;    
}
.submenu>li:hover > a{
    background: #555;
}

.menu>li:hover>a~.submenu {    
    opacity: 1;
    visibility: visible;
    max-height: 500px;
    transition: max-height .5s ease-in-out;
}


.menu>li:hover>a{
    background: #000;
}