JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">Foo</a> </li>
        <li><a href="#">Bar</a>

            <ul>
                <li><a href="#">Bar 1</a>
                </li>
                <li><a href="#">Bar 2</a>
                </li>
                <li><a href="#">Bar 3</a>
                </li>
                <li><a href="#">Bar 4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Baz</a>

            <ul>
                <li><a href="#">Baz 1</a>
                </li>
                <li><a href="#">Baz 2</a>
                </li>
                <li><a href="#">Baz 3</a>
                </li>
                <li><a href="#">bleh 3</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Qux</a></li>
    </ul>
</nav>

CSS

* { margin:0; padding:0;}

body 
{ 
    background:#000; 
    margin: 0px; 
    width: 100%;
	height:100%;
	display:inline-block;
    
}

nav 
{
    
}

nav a { text-decoration:none; color:inherit;}

nav > ul 
{
    display: inline-table;
    border-top-left-radius:1em;
}

nav ul
{
    border-bottom-right-radius: 1em;
    
    background-color: #5555DD; /* fallback for browsers that don't render gradients */
    background: linear-gradient(to left, #CCBBAA, #5555DD);
}

nav > ul > li > a
{
	/* sizing of anchor elements */
	display:block;
    padding: 1em;
    width: 8em;
    height: 4em;
    text-align:center;
    padding-top:3em;
}

nav li 
{
    
    /* sets up a gradient and transition effect*/
    background-color: #5555DD; /* fallback for browsers that don't render gradients */
    background: linear-gradient(to left , #CCBBAA, #5555DD);
    transition: background 0.5s linear 0s, color 0.5s linear 0s;
    
    color: #333;
    text-decoration: none;
    display: block;
    position: relative;
}

nav li:hover
{
	color: white;
	background: rgba(123,255,0,.35);
}

nav li li
{
    /* sizing of list elements */
    padding: .5em;
    width: 8em;
    height: 2em;
    text-align:center;
    padding-top:1.5em;    
}

/* allows sublist to be positioned directly to the right of its parent */
nav ul ul
{
    position: absolute;
	top: 0%;
	left: 100%;	
}

nav > ul > li:first-child { border-radius: 1em 0em 0em 0em; }
nav > ul li:last-child { border-radius: 0em 0em 1em 0em;}

nav li li { display: none; } /* suppress list entities*/
nav li:hover li { display: block; } /* until hovered over */

nav a+ul::before { content: ">"; position: absolute; left:-1.5em; top:3em; }