JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<header class="nav-top">
    <div class="logo">LOGO</div>
    <nav class="nav-menu">
        <ul>
              <li><a href="#">Dashboard</a></li>
             <li>
                <a href="#">System</a>
                <ul>
                <li><a href="#">Reisen</a></li>
                <li><a href="#">Fotografieren</a></li>
                </ul>
              </li>
              <li><a href="#">Content</a>
                  <ul>
                 <li><a href="#">Reisen</a></li>
                 <li><a href="#">Fotografieren</a></li>
                     </ul>
            </li>
              <li><a href="#">Help</a></li>
             </ul>
    </nav>
</header>

CSS

/* CSS-Resets (im Fiddle) */
* {margin:0;padding:0;box-sizing:border-box;}
/* nav / .nav-menu relativ positionieren, Hintergrund visualisiert die Breite */
.nav-menu {position:relative;background:#bbb;}

.nav-menu ul {
    list-style-type: none;
    display: flex;
}
/* im Kontext zum verwendeten display:flex für ul */
.nav-menu ul li {
    /*position: relative;*/ /* gilt für nav / .nav-menu */
    flex:1; /* Breite wird gleichmäßig verteilt */
}
 
.nav-menu ul li ul {
    display: none;
    position: absolute;
    background-color: #eee; /* anstatt #fff auf weißem Seitenhintergrund (im Fiddle) */
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    left: 0; /* Startposition f. abs. positioniertes Element erforderlich: soll sich auf nav beziehen, ansonsten gilt weiterhin li als "Ausgangspunkt", da unmittelbares Parent von ul */
    width: 100%; /* Breite f. abs. positioniertes Element erforderlich, ansonsten bestimmt Inhalt die Breite, alternativ right: 0; */
}
 
.nav-menu ul li:hover ul { display: block; }
 
.nav-menu li a {
    display: block;
}