JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li class="click">First
      <ul>
        <li>>sub1</li>
      </ul>
      </li>
    <li class="click">Second
      <ul>
        <li>sub2</li>
      </ul>
      </li>
  </ul>
</nav>

CSS

* {
    margin: 0;
    padding: 0;
}
ul {
    display:inline;
    height: 50px;
    background: #333;
    color: #eee;
}
li {
     display:inline-block   
}
.click {
    cursor: pointer;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}
.click:focus {
    outline: none;
}
ul li:nth-child(1n) {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    transform: translateY(-50px);
}
ul li:nth-child(1n).is-visible {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    transform: translateY(-100px);
}

JavaScript

$('li').click(function () { 
    $('li').toggleClass('is-visible');
});