JSFiddle - React, Tailwind, and code Playground

by Eduardo GarcĂ­a Sanz

HTML

<div class="nav">
    <ul>
        <li>
            <div class="subnav">
                <ul>
                    <li><a href="#">menu item</a>
                    </li>
                    <li><a href="#">menu item</a>
                    </li>
                </ul>
            </div>
            <a href="#">Services</a>
        </li>
        <li>
            <div class="subnav">
                <ul class="companylist1">
                    <li><a href="#">1</a>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                </ul>
            </div>
            <a href="/companies">Companies</a>
        </li>
        <li><a href="/locations">Locations</a>
        </li>
        <li><a href="/news">News</a>
        </li>
        <li><a href="/contact">Contact</a>
        </li>
    </ul>
</div>

CSS

div.nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
    
div.nav > ul > li {
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
}

div.nav > ul > li > div.subnav {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
}

div.nav > ul > li:hover > div.subnav {
    display: block;
}

div.nav > ul > li > div.subnav + a {
    color: red;
}