JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<ul class="clr">
  <li>
    <input type="checkbox" id="id1">
    <label for="id1">Item 1</label>
    <ul>
      <li><a href="#">Subitem 1</a></li>
      <li><a href="#">Subitem 2</a></li>
      <li><a href="#">Subitem 3</a></li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="id2">
    <label for="id2">Item 2</label>
    <ul>
      <li><a href="#">Subitem 4</a></li>
      <li><a href="#">Subitem 5</a></li>
      <li><a href="#">Subitem 6</a></li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="id3">
    <label for="id3">Item 3</label>
    <ul>
      <li><a href="#">Subitem 7</a></li>
      <li><a href="#">Subitem 8</a></li>
      <li><a href="#">Subitem 9</a></li>
    </ul>
  </li>
</ul>

CSS

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clr:after {
  content: '';
  display: block;
  clear: both;
}

a,
label {
  display: block;
  padding: 4px 10px;
  color: #000;
}

a {
  border-bottom: 1px solid #fff;
}

input {
  display: none;
}

label {
  border-right: 1px solid #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
}

li:hover>a,
li:hover>label {
  background: #bbb;
}

ul {
  background: #ddd;
}

ul.clr>li {
  float: left;
  position: relative;
}

ul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 140px;
  border-top: 1px solid #fff;
}

ul input:checked ~ ul {
  display: block;
}