JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav class='nav'>
  <ul class='nav-links'>
    <li>
      <div class='content'>
        one
      </div>
      <ul class='sub-menu'>
        <li>
          one
        </li>
        <li>
          one
        </li>
        <li>
          one
        </li>
      </ul>
    </li>
    <li>
      one
    </li>
    <li>
      one
    </li>
  </ul>
</nav>

CSS

.nav {
  height: 40px;
  background-color: white;
}
ul {
  padding: 0;
  margin: 0;
}
.nav ul.nav-links {
  list-style: none;
  height: 100%;
}
.nav ul.nav-links li {
  float: left;
  padding: 0 10px;
  height: 100%;
  border-right: 1px solid #ddd;
}
.nav ul.nav-links li:hover {
  cursor: default;
  background-color: #ddd;
  
}
.nav ul.nav-links li:hover ul.sub-menu {
  display: block;
}

.nav ul.nav-links li ul.sub-menu {
  list-style: none;
  background-color: tomato;
  color: white;
  display: none;
}
.nav ul.nav-links li ul.sub-menu li {
  float: none;
  padding: 10px 20px;
  height: auto;
  border-right: none;
}
.content {
  height: 100%;
}