JSFiddle - React, Tailwind, and code Playground

by ohcibi

HTML

<nav id="main_nav">
    <ul>
      <li>
        <a href="/de/tauchmasken">Tauchmasken</a>
        <ul>
          <li>
            <a href="/de/tauchmasken/tauchmaskenglaeser">Tauchmaskengläser</a>
          </li>
          <li>
            <a href="/de/tauchmasken/maskenauswahl">Maskenauswahl</a>
          </li>
          <li>
            <a href="/de/tauchmasken/wir-auf-der-boot">Wir auf der boot</a>
          </li>
          <li>
            <a href="/de/tauchmasken/preise">Preise</a>
            <ul>
              <li>
                <a href="/de/tauchmasken/leseglaeser">Lesegläser</a>
              </li>
              <li>
                <a href="/de/tauchmasken/sonderarbeiten-und-preisaufschlaege">Sonderarbeiten und Preisaufschläge</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="/de/tauchshop">Tauchshop</a>
      </li>
      <li>
        <a href="/de/impressum">Impressum</a>
      </li>
      <li>
        <a href="/de/kontakt">Kontakt</a>
      </li>
    </ul>
  </nav>

CSS

#main_nav {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #a0a0a0));
  background: -webkit-linear-gradient(#f4f4f4, #a0a0a0);
  background: -moz-linear-gradient(#f4f4f4, #a0a0a0);
  background: -o-linear-gradient(#f4f4f4, #a0a0a0);
  background: -ms-linear-gradient(#f4f4f4, #a0a0a0);
  background: linear-gradient(#f4f4f4, #a0a0a0);
}
nav ul {
    transition: opacity 5s ease-in;
}
nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav ul ul li {
    position: relative;
}
nav > ul > li {
    float: left;
}

nav > ul a {
    display: block;
    padding: 1em;
}
nav > ul ul {
    opacity: 0;
    position: absolute;
    background: lightgray;
}
nav > ul ul ul {
    margin: 0;
    left: 100%;
    top: 0;
}

nav > ul  li:hover > ul {
    opacity: 1;
}