JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">Punkt 1</a>
            <ul>
                <li><a href="#">Punkt 1.1</a></li>
                <li><a href="#">Punkt 1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Punkt 2</a>
            <ul>
                <li><a href="#">Punkt 2.1</a></li>
                <li><a href="#">Punkt 2.2</a></li>
            </ul>
        </li>
        
        <li><a href="#">Punkt 3</a>
            <ul>
                <li><a href="#">Punkt 3.1</a></li>
                <li><a href="#">Punkt 3.2</a></li>
            </ul>
        </li>
        <li><a href="#">Punkt 4</a>
            <ul>
                <li><a href="#">Punkt 4.1</a></li>
                <li><a href="#">Punkt 4.2</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav ul li ul{
    display:none;
}
/* Sobald das List Element gehovert wird, werden die Unterpunkte angezeigt */
nav ul li:hover ul{
    display:block;
}