JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">
				<ul class="nav menu nav-pills">
<li class="item-464 current active"><a href="/"><img src="/images/nav-home-icon.png" alt="Main"></a></li><li class="item-444 deeper parent"><a href="/index.php/sample-sites">Menu1</a><ul class="nav-child unstyled small"><li class="item-473"><a href="/index.php/getting-started">Menu1.1</a></li><li class="item-474 deeper parent"><a href="/index.php/news/news-europe">Menu1.2</a><ul class="nav-child unstyled small"><li class="item-476"><a href="/index.php/news/news-europe/news-england">Menu1.3</a></li><li class="item-477"><a href="/">Menu1.2.1</a></li><li class="item-478"><a href="/index.php/getting-started">Menu1.2.2</a></li><li class="item-479"><a href="/index.php/getting-started">Menu1.2.3</a></li><li class="item-480"><a href="/index.php/getting-started">Menu1.2.4</a></li><li class="item-481"><a href="/index.php/getting-started">Menu1.2.5</a></li><li class="item-482"><a href="/index.php/getting-started">Menu1.2.6</a></li><li class="item-483"><a href="/">Menu1.2.7</a></li><li class="item-484"><a href="/">Menu1.2.8</a></li></ul></li><li class="item-475"><a href="/index.php/getting-started">Menu1.3</a></li></ul></li><li class="item-207 deeper parent"><a href="/">Menu2</a><ul class="nav-child unstyled small"><li class="item-489 deeper parent"><a href="/">Menu2.1</a><ul class="nav-child unstyled small"><li class="item-495"><a href="/">Menu2.1.1</a></li><li class="item-496"><a href="/">Menu2.1.2</a></li><li class="item-497"><a href="/">Menu2.1.3</a></li><li class="item-498"><a href="/">Menu2.1.4</a></li><li class="item-499"><a href="/">Menu2.1.5</a></li><li class="item-500"><a href="/">Menu2.1.6</a></li><li class="item-501"><a href="/">Menu2.1.7</a></li></ul></li><li class="item-490 deeper parent"><a href="/">Menu2.2</a><ul class="nav-child unstyled small"><li class="item-502"><a href="/">Menu2.2.1</a></li></ul></li><li class="item-491"><a href="/">Menu2.3</a></li><li class="item-492 deeper parent"><a...

CSS

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

ul li
{
    position: relative;
    float:left;
    width: 100px;
}

li ul
{
    position: absolute;
    top: 30px;
    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: #E6E6E6;
    border-bottom: 2px solid #F5B800;
    color: #000;
}
ul li a:active
{
    background: #000;
    border-bottom: 2px solid #F5B800;
}
li:hover > ul
{
    display: block;
}