JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">

<main>

<h3>Simple Nav no dropdown</h3>
<nav>
  <a href="#">Computers</a>
  <a href="#">Tablets</a>
  <a href="#">Phones</a>
  <a href="#">Accessories</a>
</nav>



<h3>Nav with Dropdown under Phones</h3>
<nav>
  <ul>
    <li><a href="#">Computers</a></li>
    <li><a href="#">Tablets</a></li>
    <li>
      <a href="#">Phones</a>
      <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Samsung</a></li>
        <li><a href="#">Google</a></li>
        <li><a href="#">Sony</a></li>
      </ul>
    </li>
    <li><a href="#">Accessories</a></li>
  </ul>
</nav>

</main>

SCSS

$background: #efefef;
$background-alt: #f7f7f7;


nav {

  background: $background;
  padding: 6px;
  text-align: center;
  font-size: 1.15em;

  >a {
    padding: 1rem;
  }

  ul {
    margin: 0;
    padding: 0;

    li {
      display: inline-block;

      &:hover {
        ul {
          display: block;
        }
      }

      a {
        display: block;
        padding: 0 1rem;
        text-decoration: none;
      }

      ul {
        display: none;
        position: absolute;
        z-index: 500;
        padding: .5em 1.15em;
        background: $background;

        li {
          display: block;
          text-align: left;
          float: none;
          padding: .3em .2em;
        }

        a {
          display: inline;
          padding: 0;
          font-size: .9em;
        }
      }
    }
  }
}