JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<header>
		<nav>
			<ul>
                <li>
                    <a href="home/"  class="active">Home</a>
                    <ul>
                        <li><a href="home/info/" >Info</a></li>
                        <li><a href="ueber-uns/" >Über Uns</a></li>
                    </ul>
                </li>
                <li>
                    <a href="home/"  class="active">Home</a>
                    <ul>
                        <li><a href="home/info/" >Info</a></li>
                        <li><a href="ueber-uns/" >Über Uns</a></li>
                    </ul>
                </li>
                <li class="sonder">Ohne a-Tag</li>
            </ul>
		</nav>
	</header>
</body>

CSS

*{padding: 0;margin: 0;}body{background-color: #999;}
header>nav li{
	list-style-type: none;
	display: inline-block;
	padding: 10px;
	background-color: #FFF;
}
/* Erste Ebene Padding umgehen */
header>nav>ul>li{
	padding: 0px;
	background-color: #FFF;
}
header>nav>ul>li>a{
	display: inline-block;
	padding: 10px;
}
/* Verschachtelung verstecken */
header>nav ul ul{
	display: none;
	position: absolute;
}
header>nav ul ul>li{
	display: block;
}
/* Verschachtelung zeigen */
header>nav li:hover{
	background-color: #444;
	transition: background-color 1s;
}
header>nav li:hover ul{
	display: block;
}
.sonder{
    padding: 10px;
}