JSFiddle - React, Tailwind, and code Playground

by JohnFish

HTML

<ul>
  <li>Item 1</li>
  <li class="dropdown">Item 2
    <ul>
      <li>Dropdown</li>
      <li>Second Dropdown</li>
      <li>Final Dropdown</li>
    </ul>
  </li>
  <li class="dropdown">Item 3
      <ul>
      <li>Dropdown</li>
      <li class="secondary dropdown">Secondary Dropdown
            <ul>
      <li>Dropdown</li>
      <li>Second Dropdown</li>
      <li>Final Dropdown</li>
    </ul>
        </li>
      <li>Final Dropdown</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  float: left;
  padding: 5px;
  display: block;
  background: blue;
}
li:hover ul {
  display: block;
}
li ul li {
  float: none;
}
li ul {
  display: none;
}
.dropdown {
    display: none;
}
ul {
  list-style-type: none;
}