JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu">
      <ul>
        <li class="direkt"><a href="index.html">Startseite</a>
        </li>
      </ul>
      <ul>
        <li id="roundtop"><a href="content.html">Inhalt</a>
          <ul>
            <li id="roundtopright"><a href="#">Linkziel 1</a></li>
            <li id="noround"><a href="#">Linkziel 2</a></li>
            <li id="roundbottom"><a href="#">Linkziel 3</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li id="roundtop"><a href="offer.html">Angebot</a>
          <ul>
            <li id="roundcross"><a href="#">Linkziel 1</a></li>
              <li id="noround" class="Unterpunkte"><a href="#">Linkziel 1.1</a></li>
              <li id="noround" class="Unterpunkte"><a href="#">Linkziel 1.2</a></li>
            <li id="roundleft"><a href="#">Linkziel 2</a></li>
              <li id="noround" class="Unterpunkte"><a href="#">Linkziel 2.1</a></li>
              <li id="noround" class="Unterpunkte"><a href="#">Linkziel 2.2</a></li>
              <li id="noround" class="Unterpunkte"><a href="#">Linkziel 2.3</a></li>
            <li id="roundleft"><a href="#">Linkziel 3</a></li>
              <li id="noround" class="Unterpunkte"><a href="#">Linkziel 3.1</a></li>
              <li  id="roundbottom"class="Unterpunkte"><a href="#">Linkziel 3.2</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li class="direkt"><a href="about.html">Über mich</a>
        </li>
      </ul>
      <ul>
        <li class="direkt"><a href="contact.html">Kontakt</a>
        </li>
      </ul>
    </nav>

CSS

*{
  margin: 0px;
  padding: 0px;
}

#menu {
width: 570px;
padding: 0 0px;
font-family: Verdana;
font-size: 1em;
float: left;
}

#menu ul {
float: left;
width: 114px;
list-style-type: none;
}



/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
border-radius: 10px;
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
color: #003366;
height: 30px;
line-height: 30px;
margin-top: 15px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #ff9224;
background: #003366;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

/*---- Abgerundete Ecken des Navigationsmenus -----*/
#roundtop a:hover{
  border-radius: 0px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

#roundtopright a:hover{
  border-radius: 0px;
  border-top-right-radius: 10px;
}

#roundtopright a{
  border-radius: 0px;
  border-top-right-radius: 10px;
}

#noround a{
  border-radius: 0px;
}

#noround a:hover{
  border-radius: 0px;
}

#roundbottom a{
  border-radius: 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#roundbottom a:hover{
  border-radius: 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#roundcross a{
  border-radius: 0px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}

#roundcross a:hover{
  border-radius: 0px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}

#roundleft a{
  border-radius: 0px;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}

#roundleft a:hover{
  border-radius: 0px;
  border-bottom-left-radius: 10px;
 ...