JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<nav class="four">
  <h2>4) .submenu {transform: scaleY(0);}</h2>
  <ul class="topmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About<i class="fa fa-angle-down"></i></a>
      <ul class="submenu">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

@import url(https://fonts.googleapis.com/css?family=Lora);
body {margin:0;}
h2 {
  font-family: monospace;
  color: #606060;
}
nav {
  width: 660px;
  margin: 0 auto 30px;
}
ul {
  list-style: none; 
  margin: 0;
  padding: 0;
}
.topmenu > li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
.topmenu > li:last-child {
  margin-right: 0;
}
a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  outline: none;
  font-family: 'Lora', serif;
  transition: .5s linear;
}
.fa {
  font-family: "FontAwesome";
  color: inherit;
  padding-left: 10px;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.four ul {
  background: #FFD7A7;
}
.four .submenu {
  -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
  -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
  background: #FFAB51;
}
.four ul li:hover .submenu {
  -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
}
.four ul a {
  color: #9B4222;
}