JSFiddle - React, Tailwind, and code Playground

HTML

<div class="relative">
    <nav>
        <ul>
            <li>
                <a>text one</a>
                <!-- absolute child of .relative -->
                <div class="absolute-sibling">content one</div>
            </li>
            <li>
                <a>text two</a>
                <!-- absolute child of .relative -->
                <div class="absolute-sibling">content two</div>
            </li>
            <li>
                <a>text three</a>
                <!-- absolute child of .relative -->
                <div class="absolute-sibling">content three</div>
            </li>
        </ul>
    </nav>
</div>

CSS

.relative {
        position: relative;
    }
    nav {
        min-width: 100vw;
        height: fit-content;
        overflow: hidden;
    }
    ul {
        display: block;
        min-width: 100vw;
        list-style-type: none;
        margin: 0;
        padding: 0;
        /* breaks stacking order */
        transform: translateX(10px);
    }
    li {
        display: inline-block;
    }
    li a {
        display: block;
        padding: 4px 8px;
        font-size: 1rem;
        max-height: 1rem;
    }
    li a:hover {
        background-color: red;
    }
    .absolute-sibling {
        position: absolute;
        left: 0;
        top: calc(1rem + 8px);
        width: 100vw;
        height: fit-content;
        display: none;
    }
    li a:hover + .absolute-sibling,
    .absolute-sibling:hover {
        background-color: red;
        display: block;
    }