JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navlist">
    <li>
        <a href="#">Test1</a>
    </li>
    <li>
        <a href="#">Test2</a>
    </li>
    <li class="current">
        <a href="#">Test3</a>
    </li>
    <li>
        <a href="#">Test4</a>
        <ul class="subnav">
            <li><a href="#">Sub1</a></li>
            <li><a href="#">Sub2</a></li>
            <li><a href="#">Sub3</a></li>
            <li><a href="#">Sub4</a></li>
        </ul>
    </li>
</ul>

CSS

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

ul.navlist, ul.subnav
{
    display:flex;
    flex-direction:row;
}

ul.navlist li
{
    flex:1 1 5em;
}

ul.navlist a
{
    padding:5px;
    display:block;
    white-space:nowrap;
    color:black;
    text-decoration:none;
}

ul.navlist > li > a
{
    background:silver;
}

ul.navlist > li.current > a
{
    background:gainsboro;
}

ul.subnav > li > a
{
    background:gainsboro;
    text-align:center;
}

ul.navlist > li
{
    flex-direction:column;
}

ul.navlist > li > ul.subnav
{
    width:400%;
}

ul.navlist > li:nth-child(2) > ul.subnav
{
    margin-left:-100%;
}

ul.navlist > li:nth-child(3) > ul.subnav
{
    margin-left:-200%;
}

ul.navlist > li:nth-child(4) > ul.subnav
{
    margin-left:-300%;
}