JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="level_1">
    <li>
        <a href="#">Level one (1)</a>
        <ul class="level_2">
            <li><a href="#">Level two (1)</a></li>
        </ul>
    </li>
    <li><a href="#">Level one (2)</a></li>
</ul>

<p>Paragraph</p>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    position:relative;
}
.level_1 > li:hover ul {
    display: block;
}
.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

.level_2 li {
    background-color: #535B68;
    
}