JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="menu1"><a href="#">Menu 1</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
    <li class="menu1"><a href="#">Menu 2</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
</ul>

CSS

.nav-menu1{
    display:none}

.menu1>a:hover+.nav-menu1,.nav-menu1:hover{
    display:block}

.none+ul{
    -o-transition: opacity .7s; 
    -moz-transition: opacity .7s;
    -webkit-transition: opacity .7s;
    
    margin-top:-2em;
    position:absolute;
    left:10em;
       width:10em;
    height:auto;
    visibility:hidden;
    opacity:0;
    overflow:hidden;
    background:black;}

.none:hover+ul,.none+ul:hover{
    /*   height:5em;*/
    
    
    visibility:visible;
    opacity:1;}

a{
    color:orange}

.menu1>a{
    background:#e3e3e3;
    border:1px solid black;
    color:black;
    padding:2px 10px 2px 10px}

section.nav-menu1{
    background:grey;
    color:black;
    position:relative;
    width:10em;}