JSFiddle - React, Tailwind, and code Playground

by Bart Kalisz

HTML

<div class="menu">
  <div class="item">
    <input type="checkbox" class="menu-toggle" />
    <a class="link" href="#">Forums</a>
    <div class="menu">
      <div class="item">
        <a class="link" href="#">Welcome</a>
      </div>
      <div class="item">
        <a class="link" href="#">Search</a>
      </div>
      <div class="item">
        <a class="link" href="#">Jump to</a>
      </div>
      <div class="item">
        <input type="checkbox" class="menu-toggle" />
        <a class="link" href="#">Categories</a>
        <div class="menu">
          <div class="item">
            <a class="link" href="#">All forums</a>
          </div>
          <div class="item">
            <a class="link" href="#">Country forums</a>
          </div>
          <div class="item">
            <a class="link" href="#">Interest forums</a>
          </div>
          <div class="item">
            <a class="link" href="#">Travel buddies & for sale</a>
          </div>
          <div class="item">
            <a class="link" href="#">Talk to Lonely Planet</a>
          </div>
          <div class="item">
            <a class="link" href="#">Tree House forums</a>
          </div>
          <div class="item">
            <a class="link" href="#">Pathfinder assignments</a>
          </div>
          <div class="item">
            <a class="link" href="#">Test forum</a>
          </div>
        </div>
      </div>
      <div class="item">
        <input type="checkbox" class="menu-toggle" />
        <a class="link" href="#">Explore</a>
        <div class="menu">
          <div class="item">
            <a class="link" href="#">New topics</a>
          </div>
          <div class="item">
            <a class="link" href="#">Active topics</a>
          </div>
          <div class="item">
            <a class="link" href="#">Unanswered topics</a>
          </div>
          <div class="item">
            <a class="link" href="#">Trending topics</a>
          </div>
        </div>
   ...

SCSS

body {
  background: white;
  margin: 0;
  padding: 0;
}

.link {
  position: relative;
  display: block;
  padding: 14px 20px;
  font-size: 14px;
  font-family: Arial;
  text-decoration: none;
  color: #67747c;
  cursor: pointer;
  
  &:hover {
    color: #297CBB;
  }

  .menu-toggle:checked ~ & {
    background-color: rgba(#297CBB, 0.1);
    font-weight: bold;
  }

  .menu-toggle ~ &:after {
    content: "►";
    display: block;
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px;
    transition: all 0.2s
  }    

  .menu-toggle:checked ~ &:after {
    transform: rotate(90deg);
  }
}

.item {
  position: relative;
  z-index: 0;

  & ~ & {
    border-top: 1px solid #f5f5f5;
  }
}

.menu-toggle {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: block;
  box-sizing: border-box;
  width: 54px;
  height: 44px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0;
}

.menu {
  background: #f9fbfe;

  .menu-toggle:not(:checked) ~ & {
    display: none;
  }
    
  .item > & {
    border: solid rgba(#297CBB, 0.1);
    border-width: 1px 0 1px 8px;
  }
}