JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<ul class="main">
  <li>Test</li>
  <li>Test
    <ul class="sub">
      <li>test</li>
      <li>test
          <ul class="third-level">
            <li>test</li>
            <li>test</li>
          </ul>
      </li>
    </ul>
  </li>
  <li>Test</li>
</ul>

CSS

ul{
  margin:0;
  padding:0;
  list-style:none;
  font-size: 0;
}
ul li{ padding: 10px; font-size:14px;}
.main > li{
  display:inline-block;
  vertical-align: top;
  padding: 10px; 
  background: #fff;
  position:relative;
}

.main > li .sub {
  position:absolute;
  left: 0;
  right: 0;
  top: 100%;
  display:none;
  background:#fff;
}
.main > li .sub > li { position:relative;}
.main > li .sub > li .third-level {
  position:absolute;
  right: -37px;
  top: 0;
  display:none;
  background:#fff;
}

.main > li:hover .sub , .main > li .sub > li:hover .third-level {
  display:block
}