JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="navbar">
            <ul class="topnav left">
                <li>nav</li>
                <li>menu1
                    <span class="subnav">
                        <ul class="subnav subnav-left">
                            <li>item1-1</li>
                            <li>item1-2</li>
                            <li>item1-3</li>
                        </ul>
                    </span>
                </li>
                <li>menu2
                    <span class="subnav">
                        <ul class="subnav subnav-left">
                            <li>item2-1</li>
                            <li>item2-2</li>
                            <li>item2-3</li>
                        </ul>
                    </span>
                </li>
            </ul>
            <ul class="topnav right">
                <li class="right">menu3
                    <span class="subnav subnav-right">
                        <ul class="subnav subnav-left">
                            <li>item3-1</li>
                            <li>item3-2</li>
                            <li>item3-3</li>
                        </ul>
                    </span>
                </li>
                <li class="right">menu4
                    <span class="subnav subnav-right">
                        <ul class="subnav subnav-left">
                            <li>item4-1</li>
                            <li>item4-2</li>
                            <li>item4-3</li>
                        </ul>
                    </span>
                </li>
            </ul>
        </div>
    </body>

CSS

body {
    font-family: arial;
    margin: 0;
}

.navbar {
    height: 40px;
    background-color: black;
}

ul.topnav {
    margin: 0;
    padding: 0;
}

.subnav {
    position: absolute;
}

.subnav-right {
    right: 0;
}

ul.subnav {
    position: relative;
    margin: 4px 0 0 -8px;
    padding: 0;
    display: none;
}

ul.topnav  li{
    list-style: none;
    display: inline-block;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    line-height: 32px;
    float: left;
    clear: none;
    box-sizing: border-box;
}

ul.subnav li {
    background-color: red;
    list-style: none;
    display: inline-block;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    position: relative;
    line-height: 32px;
    float: left;
    clear: none;
    box-sizing: border-box;
}

.topnav li:hover {
    background-color: red;
}

.topnav li:hover ul.subnav {
    display: inline-block;
    background-color: red;
}

.nav ul li:hover {
    background-color: black;
}

.nav ul li {
    width: 100%;
}

.nav li ul {
    display: inline-block;
    clear: none;
    position: absolute;
    background-color: red;
    margin: 4px 0 0 -8px;
    padding: 0;
}

.left {
    float: left;
}

.right {
    float: right;
}