JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/include/head/css/columnal.css">
<link rel="stylesheet" href="http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/include/head/css/style.css">
<link rel="stylesheet" href="http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/include/head/css/nav.css">
<link rel="stylesheet" href="http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/include/head/css/build.css">
<nav>
    <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul class="main-sub-nav">
                <li><a href="#">About Sub 1</a></li>
                <li><a href="#">About Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

CSS

.main-nav > li:hover > a {background: #ccc;}