JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<div class='horizontal nav'>
      <div class='list'>
        <div class='item'>
          <a>Link</a>
          <div class='list'>
            <div class='item'>
              <a>Link</a>
              <div class='list'>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
              </div>
            </div>
            <div class='parent-background'></div>
            <div class='item'>
              <a>Link</a>
              <div class='list'>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
                <div class='item'>
                  <a>Link</a>
                </div>
                <div class='parent-background'></div>
              </div>
            </div>
            <div class='parent-background'></div>
            <div class='item'>
              <a>Link</a>
              <div...

CSS

*,
*:before,
*:after {
  box-sizing: border-box; }

div {
  font-size: 0; }

body {
  text-align: center; }

a {
  text-decoration: none;
  font-size: 14px;
  color: black; }
  a:hover {
    cursor: pointer; }

.item:hover + .parent-background {
  background: rgba(255, 99, 71, 0.38); }

.item {
  background: gainsboro; }

a:hover {
  background: tomato; }

/* MAIN PART */
/* hide all but root list... */
.list {
  display: none; }

.nav > .list {
  display: inline-block; }

/* ... and show them on hover */
.item:hover > .list {
  display: inline-block;
  position: absolute;
  left: 100%;
  top: 0; }

/* (horizontal)root list differs a little */
.nav > .list > .item:hover > .list {
  position: static; }

.item:hover {
  z-index: 100; }

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

/* root list does not have parent */
.nav > .list > .item:hover + .parent-background {
  display: none; }

/* background position in vertical and horizontal nav... */
.item:hover + .parent-background {
  right: 100%; }

.horizontal.nav > .list > .item > .list > .item:hover + .parent-background {
  left: 0; }

/* link must be seen when we put background-element under it (z-index of link is higher than z-index of background) */
a {
  position: relative;
  z-index: 20; }

/* all elements must have fixed height... */
.parent-background,
.list,
.item {
  height: 34px; }

a {
  line-height: 34px;
  white-space: nowrap;
  display: block; }

/* ... except (horizontal)root list */
.horizontal.nav > .list {
  width: auto !important; }

/* item must have fixed width... */
.item {
  width: 144px;
  display: inline-block;
  vertical-align: top;
  position: relative; }

/* root list must not been broken on small screen, I think  */
.nav {
  white-space: nowrap; }

.nav .item {
  white-space: normal; }