JSFiddle - React, Tailwind, and code Playground

by Adil Heybətov

HTML

<nav>
  <ul>
    <li class="click"><a href="javascript:;">Buraya Bas</a>
      <ul>
        <li><a href="javascript:;">sdsd</a></li>
        <li><a href="javascipt:;">asdadf</a></li>
        <li><a href="javascript:;">asdasd</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

nav ul {
  position: relative;
  width: 64px;
  margin: 350px 0 0 0;
  padding: 0;
  background: #999;
  list-style: none;
}

nav img {
  float: left width: 64px;
  height: 64px;
}

nav a {
  float: left;
}

nav ul li {
  float: left;
  background-color: #999;
}

nav ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}

nav ul ul {
  visibility: hidden;
  display: block;
  position: absolute;
  opacity: 0;
  width: 300px;
  height: 200px;
  bottom: 100%;
  transition: opacity .3s linear, visibility .3s linear;
}