JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="fusszeile">
  <li>Hilfe &amp; Kontakt
     <ul>
       <li><a href="versand.php">Versandkosten</a></li>
       <li><a href="faq.php">Häufig gestellte Fragen</a></li>
       <li><a href="kontakt.php">Kontaktformular</a></li>
       <li><a href="tutorial.php">Führung durch unsere Seite</a></li>
     </ul>
  </li>
  <li>Rechtliches
     <ul>
       <li><a href="agb.php">AGB</a></li>
       <li><a href="disclaimer.php">Haftungsausschlu&szlig;</a> </li>
       <li><a href="datenschutz.php">Datenschutzbestimmungen</a></li>
       <li><a href="impressum.php">Impressum</a></li>
     </ul>
  </li>
</ul>

CSS

#fusszeile {
  margin-top:35px;
  text-align:center;
  background:#96468C;
  color:#FFF;
  font-size:.9em;
}
#fusszeile > li {
  padding:0 10px;
  position:relative;
  z-index:1;
  display:inline-block;
  text-align:left;
  cursor:pointer;
}
#fusszeile > li:first-child {
  border-right:1px solid
}
#fusszeile ul {
  padding:10px;
  display:none;
  position:absolute;
  top:1.2em;
  left:0;
  z-index:3;
  background:#BD84B4;
  min-width:200px;
  border:1px solid background:#96468C;;
}
#fusszeile ul a {
  display:block;
  padding:3px 0;
  color:#FFF;
}
#fusszeile ul a:focus,
#fusszeile ul a:hover,
#fusszeile ul a:active{
  color:#EEE;
  text-decoration:none;
}
#fusszeile li:hover ul,
#fusszeile ul a {
  display:block;
}