JSFiddle - React, Tailwind, and code Playground

HTML

<li class="item-207 deeper parent"><a href="/">Championships</a><ul class="nav-child unstyled small"><li class="item-489 deeper parent"><a href="/">England</a><ul class="nav-child unstyled small"><li class="item-495"><a href="/">PremierLeague</a></li><li class="item-496"><a href="/">Championship</a></li><li class="item-497"><a href="/">Ligue One</a></li><li class="item-498"><a href="/">Ligue Two</a></li><li class="item-499">

CSS

li
{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}
ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}

ul li
{
    position: relative;
}

li ul
{
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a
{
    display: block;
    text-decoration: none;
    color: #fff;
    background: #4d4d4d;
    padding: 2px 0 2px 10px;
    border: 1px solid #ccc;
    border-bottom: 0;
}
ul li a:hover
{
    background: #000;
    border-bottom: 2px solid #F5B800;
}
ul li a:active
{
    background: #000;
    border-bottom: 2px solid #F5B800;
}
li:hover > ul
{
    display: block;
}