JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
        <li><a href="thema1.html">Thema 1 </a>
        </li>
        <li class="menu-hover"><a href="thema2.html">Thema 2 </a>

            <ul>
                <li><a href="thema2-kind.html">Thema 2 Kind </a>
                </li>
                <li><a href="thema2-kind_und_freund.html">Thema 2 Kind und Freund </a>
                </li>
                <li><a href="thema2-kind_und_freundin.html">Thema 2 Kind und Freundin </a>
                </li>
            </ul>
        </li>
        <li><a href="thema3.html">Thema 3 </a>

            <ul>
                <li><a href="thema3-kind.html">Thema 3 Kind </a>
                </li>
                <li><a href="thema3-kind_und_freund.html">Thema 3 Kind und Freund </a>
                </li>
            </ul>
        </li>
        <li><a href="thema4.html">Thema 4 </a>

            <ul>
                <li><a href="thema4.-kind.html">Thema 4 Kind</a>

                    <ul>
                        <li><a href="thema4-enkel.html">Thema 4 Enkel</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <li><a href="thema5.html">Thema 5 </a>
            </li>
            <li><a href="thema6.html">Thema 6 </a>
            </li>
            <li><a href="thema7.html">Thema 7 </a>
            </li>
        </li>
    </ul>
</div>

CSS

#nav ul
{
    list-style-type: none;
    padding-left: 20px;
}
#nav > ul
{
    max-width: 180px
}
#nav > ul > li
{
    min-height: 20px;
    margin-bottom: 20px;
    background-color: orange;
}
#nav > ul > li > a
{
    background-color: red;
    width: inherit;
    display: block;
    padding: 5px;
}
#nav > ul > li > ul li
{
    background-color: yellow;
    margin-top: 10px;  
    padding: 5px;
    min-height: 20px;
}
.menu-hover > ul
{
    display:none;
}
.menu-hover:hover > ul
{
    display: block;
}