JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation-wrapper">
        <div class="main">
            <ul>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
            </ul>
        </div>
        <div class="sub">
            <ul>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
            </ul>
        </div>
    </div>

CSS

.main { background: red; }
.sub { background: black; }
    .navigation-wrapper .sub { display: none; }
    .navigation-wrapper:hover .main { display: none; }
    .navigation-wrapper:hover .sub { display: block; }