JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<ul id="navi">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Philosophie</a></li>
    <li><a href="#">Leistungen</a></li>
    <li><a href="#">Unser Team</a>
        <ul>
            <li><a href="#">Rainer Zufall</a></li>
            <li><a href="#">Claire Grube</a></li>
            <li><a href="#">Armin Gips</a></li>
            <li><a href="#">Anna Bolika</a></li>
            <li><a href="#">Bill Yard</a></li>
            <li><a href="#">Klaus Thaler</a></li>
            <li><a href="#">Volker Putt</a></li>
        </ul>
    </li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

CSS

html, body {
    background: #FFF;
}
a {
    font-weight: bold;
}
ul {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
}
#navi > li {
    position: relative;
    float: left;
}
#navi > li a {
    display: block;
    padding: 8px;
}
#navi > li ul {
    position: absolute;
    left: 0;
    display: none;
    width: 10em;
}
#navi > li:hover ul {
    display: block;
}

/* Links sind abwechselnd blau und grün */


/* Wechselnder Hintergrund */


/* Shop hervorheben */