JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="mainNavWrapper">
    <div class="mainNav">
        <ul class="nav">
            <li><a href="#">Item One</a>
                <ul class="subnav">
                    <li><a href="#">Sub Item One</a></li>
                    <li><a href="#">Sub Item One</a></li>
                    <li><a href="#">Sub Item One</a></li>
                    <li><a href="#">Sub Item One</a></li>
                </ul>
            </li>
            <li><a href="#">Item Two</a></li>
            <li><a href="#">Item Three</a></li>
            <li><a href="#">Item Four</a></li>
        </ul>
    </div>
</div>

<div class="secondNavWrapper">
    <div class="secondNav">
        <ul class="nav">
            <li><a href="#">Item One</a>
                <ul class="subnav">
                    <li><a href="#">Sub Item One</a></li>
                    <li><a href="#">Sub Item One</a></li>
                    <li><a href="#">Sub Item One</a></li>
                    <li><a href="#">Sub Item One</a></li>
                </ul>
            </li>
            <li><a href="#">Item Two</a></li>
        </ul>
    </div>
</div>

CSS

.mainNavWrapper {
    position:relative;
    float:left;
}

.secondNavWrapper {
    position:relative;
    float:right;
}

.mainNav {
    background:#cc0000;
}

.secondNav {
    background:#efefef;
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    display:inline-block;
}

.nav li {
    display:inline-block;
    position:relative;
    text-align:center;
}

.nav li a {
    display:block;
    line-height:60px;
    font-family:Arial;
    font-size:12px;
    padding:10px;
}

.nav li ul {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    width:100px;
    background:green;
}

.nav li:hover .subnav {
    display:block;
}

.nav .subnav li {
    text-align:left;
    margin:0;
    display:block;
}