JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
 <ul class="menu">
     <li class="menu-item" id="first-item-active"><i class="fa fa-home"></i> Home page
     </li>
     <li class="menu-item"><i class="fa fa-coffee"></i> Hangout
         <ul class="curtain">
             <li>Webmaster Discussion</li>
             <li>Webmasters, Money Making</li>
             <li>Technical Help Desk Support</li>
             <li>Site Reviews</li>
         </ul>
     </li>
     <li class="menu-item"><i class="fa fa-codepen"></i> Development
         <ul class="curtain">
             <li>Web Development Area</li>
             <li>Content Management</li>
             <li>Site & Server Administration</li>
             <li>Graphics Area</li>
         </ul>
     </li>
     <li class="menu-item"><i class="fa fa-cogs"></i> Resources
         <ul class="curtain">
             <li>Webmaster Resources</li>
             <li>Tutorials and Guides</li>
             <li>Web Application/Script Support</li>
             <li>Useful Sites</li>
             <li>Legal Issues</li>
             <li>Community Cooperative</li>
             <li>Forum and DDL Discussion</li>
         </ul>
     </li>
     <li class="menu-item"><i class="fa fa-search"></i> Seo
         <ul class="curtain">
             <li>Whitehat SEO</li>
             <li>Blackhat SEO</li>
             <li>SEO Products & Tools</li>
         </ul>
     </li>
     <li class="menu-item"><i class="fa fa-shopping-cart"></i> Marketplace
         <ul class="curtain">
             <li>Marketplace (Buy/Sell/Trade)</li>
             <li>Traffic Market (Buy/Sell/Trade)</li>
         </ul>
     </li>
     <li class="menu-item"><i class="fa fa-ticket"></i> e-commerce
         <ul class="curtain">
             <li>PayPal</li>
             <li>Bitcoin</li>
             <li>Payza</li>
             <li>Payoneer</li>
             <li>Other</li>
         </ul>
     </li>
     <li...

CSS

* {
    box-sizing: border-box;
}

@-moz-keyframes slide {
	
from { 
	height: 0%;
}

to { 
	height: 200%;
}

}

@-webkit-keyframes slide {
	
from { 
	height: 0%;
}

to { 
	height: 200%;
}

}

@-o-keyframes slide {
	
from { 
	height: 0%;
}

to { 
	height: 200%;
}

}

.container {
    background: none;
    border: none;
    height: 92px;
    width: 1323px;
    margin: auto auto;
    padding: 0px;
}

.menu {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
    height: 60px;
    width: 100%;
    border: 1px solid #828c95;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0;
    margin: 0;
}

.menu-item {
    height: 58px;
    width: 135px;
    list-style: none;
    float: left;
    text-align: center;
    line-height: 88px;
    border-right: 1px solid #cccccc;
    font-family: Verdana,Tahoma,Calibri,Geneva,sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    color: #404d56;
    font-size: 10px;
    text-shadow: 0px 1px 0px #fff;
    cursor: pointer;
    position: relative;
}

.menu-item i {
    position: absolute;
    font-size: 25px;
    top: 11px;
    margin-left: 50%;
    left:...