JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="#">Menu 1</a> 
        <ul>
            <div>
                <li><a href="#">Level 1.1</a></li>
                <li><a href="#">Level 1.2</a></li>
            </div>
        </ul>
    </li>
    <li><a href="#">Menu 2</a> 
        <ul>
            <div>
                <li><a href="#">Level 2.1</a></li>
                <li><a href="#">Level 2.2</a></li>
                <li><a href="#">Level 2.3</a></li>
                <li><a href="#">Level 2.4</a></li>
                <li><a href="#">Level 2.5</a></li>
                <li><a href="#">Level 2.7</a></li>
                <li><a href="#">Level 2.8</a></li>
                <li><a href="#">Level 2.9</a></li>
                <li><a href="#">Level 2.10</a></li>
            </div>
        </ul>
    </li>
    <li><a href="#">Menu 3</a> 
        <ul>
            <div>
                <li><a href="#">Level 3.1</a></li>
                <li><a href="#">Level 3.2</a></li>
                <li><a href="#">Level 3.3</a></li>
            </div>
        </ul>
    </li>
    <li><a href="#">Menu 4</a> 
        <ul>
            <div>
                <li><a href="#">Level 4.1</a></li>
                <li><a href="#">Level 4.2</a></li>
                <li><a href="#">Level 4.3</a></li>
                <li><a href="#">Level 4.4</a></li>
                <li><a href="#">Level 4.5</a></li>
            </div>
        </ul>
    </li>
</ul>

CSS

#menu a {
    display:block;
    color: #fff;
    text-decoration:none;
}
#menu > li, #menu > li li {
    position: relative;
    display:inline-block;
    margin:0px;
    width: 110px;
    padding: 6px 15px;
    background-color: #777;
    background-image: linear-gradient(#aaa, #888 50%, #777 50%, #999);
}
#menu > li li {
    background: transparent none;
}
#menu > li li a {
    color: #444;
}
#menu > li li:hover {
    background:#eee;
}
#menu > li:first-child {
    border-right: 1px solid #777;
    border-radius: 8px 0 0 8px;
}
#menu > li + li {
    margin-left: -4px;
    border-left: 1px solid #aaa;
    border-right: 1px solid #777;
}
#menu > li:last-child {
    margin-right: 0px;
    border-right:0;
    border-left: 1px solid #aaa;
    border-radius: 0 8px 8px 0;
}
#menu > li:hover {
    background-color: #999;
    background-image: linear-gradient(#ccc, #aaa 50%, #999 50%, #bbb);
}
 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    position: absolute;
    top: 2em;
    left:0;
    margin:0;
    padding:0;
    overflow:hidden;
    border-radius: 0 0 8px 8px;
}
#menu div {

    top:0;
    left:0;
    margin:0;
    padding:0;
    transition: 0.5s 1s;
    z-index:-1;
    background-color:#ddd;
    background-image: linear-gradient(#fff, #ddd);
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}
#menu > li:hover ul {
     transition:none;
     visibility:visible;
}
 #menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}