JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Home</a>

    </li>
    <li><a href="#">About</a>

    </li>
    <li> <a href="#">Products &#9662;</a>

        <ul class="dropdown">
            <li><a href="#">Laptops</a>

            </li>
            <li><a href="#">Monitors</a>

            </li>
            <li><a href="#">Printers</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a>

    </li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>

CSS

ul {
     padding: 0;
     list-style: none;
     background: #f2f2f2;
 }
 ul li {
     display: inline-block;
     position: relative;
     line-height: 21px;
     text-align: left;
 }
 ul li a {
     display: block;
     padding: 8px 25px;
     color: #333;
     text-decoration: none;
 }
 ul li a:hover {
     color: #fff;
     background: #939393;
 }
 ul li ul.dropdown {
     min-width: 125px;
     /* Set width of the dropdown */
     background: #f2f2f2;
     display: none;
     position: absolute;
     z-index: 999;
     left: 0;
 }
 ul li:hover ul.dropdown {
     display: block;
     /* Display the dropdown */
 }
 ul li ul.dropdown li {
     display: block;
 }

JavaScript

var lis = document.querySelectorAll('ul > li');
var styles = {
    hover: {
        color: '#fff',
        background: '#939393'
    },
    original: {
        color: '#000',
        background: '#f2f2f2'
    }
};

function hover(e) {
    var el = this;
    var anchor = el.querySelector('a');
    var state = e.type == 'mouseenter' ? 'hover' : 'original';
    Object.keys(styles[state]).forEach(function (key) {
        anchor.style[key] = styles[state][key];
        el.style[key] = styles[state][key];
    })
}
var lis = document.querySelectorAll('ul > li');
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('mouseenter', hover);
    lis[i].addEventListener('mouseleave', hover);
}