JSFiddle - React, Tailwind, and code Playground

by agconti

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <nav class="menu--main">
	<ul>
		<li class="menu__item">
			<a href="#">Home</a>
		</li>
		<li class="menu__item--dropdown">
			<a href="#">Catalog</a>
			<ul>
				<li><a href="#">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
				<li><a href="#">Four</a></li>
				<li><a href="#">Five</a></li>
			</ul>
		</li>
		<li class="menu__item">
			<a href="#">Blog</a>
		</li>
		<li class="menu__item--dropdown">
			<a href="#">About Us</a>
			<ul>
				<li><a href="#">One</a></li>
				<li><a href="#">Two</a></li>
				<li><a href="#">Three</a></li>
				<li><a href="#">Four</a></li>
				<li><a href="#">Five</a></li>
			</ul>
		</li>
		<li class="menu__item">
			<a href="#">Wish-Gears</a>
		</li>
	</ul>
</nav>
</body>
</html>

CSS

nav {
  position:relative;
  text-align:center;
}

nav:after {
    background:#111;
    bottom:0;
    content:"";
    height:1px;
    left:0;
    position:absolute;
    right:0;
}

nav ul {
  display:inline-block;
  list-style:none;
  margin:0;
  padding:0;
}

nav li {
  display: inline-block;
}

nav a {
  display:inline-block;
  padding:1em;
}

.menu__item--dropdown {
  position:relative;
}

.menu__item--dropdown ul {
  background:#dddddd;
  left:0;
  opacity:0;
  position:absolute;
  text-align:left;
  top:100%;
  transition:visibility 0s ease .5s, opacity .5s ease;
  visibility:hidden;
  width:200%;
}

.menu__item--dropdown:hover ul {
  opacity:1;
  transition-delay:0s;
  visibility:visible;
}

.menu__item--dropdown ul li {
  display:block;
}