JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wraper">
 <header class="header">
  <nav>
  <!-- top menu -->
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Endpoint Security and Encryption</a></li>
        <li><a href="#">Managed PCI Compliance</a></li>
        <li><a href="#">Cloud Based Penetration Tests</a></li>
        <li><a href="#">PCI Compliant Managed Hosting</a></li>
        <li><a href="#">PCI Advice & Guidance</a></li>
        <li><a href="#">Cloud Based IT Forensics</a></li>
        <li><a href="#">Wireless Handheld Device Security</a></li>
        <li><a href="#">Service Uptime Solutions</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a>
      <ul>
        <li><a href="#">Partners</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
   </ul>
  <!-- /top menu -->
  </nav>
 </header>
</div>

CSS

/* top menu */
.header nav ul {zoom: 1;-webkit-font-smoothing: antialiased;}
.header nav ul li {font-size:14px;font-weight:bold;float:left;padding:0 0 0 38px;position:relative;}
.header nav ul li:after {content:'';float:left;display:block;width:12px;height:12px;}
.header nav > ul > li:nth-child(3):after {content:'';background:url(../images/sprite.png) 6px 7px no-repeat;float:left;display:block;width:12px;height:12px;}
.header nav > ul > li:nth-child(2):after {content:'';background:url(../images/sprite.png) 6px 7px no-repeat;float:left;display:block;width:12px;height:12px;}
.header nav ul li a, .header nav ul li a:visited {color:#434242;float:left;height:30px;}
.header nav ul li a:hover {color:#3fa3c9;}
.header nav > ul > li:hover > ul {display:block;opacity: 1;top: 25px;}
.header nav ul ul {position:absolute;top:16px;left:23px;z-index:99999;background:#f6f3f3;opacity: 0;-webkit-transition: all .30s ease;-moz-transition: all .30s ease;-ms-transition: all .30s ease;-o-transition: all .30s ease;transition: all .30s ease;}
.header nav ul ul ul {top:0;left:160px;}
.header nav ul ul li {float:none;padding:0;display:block;font-size:12px;font-weight:normal;}
.header nav ul ul a {float:none;padding:14px 26px 14px 12px;width:130px;height:auto;display:block;float:none;border:1px solid #dbe8ed;border-bottom:1px solid #e3e3e3;border-top:1px solid #fff;-webkit-transition: all .30s ease;-moz-transition: all .30s ease;-ms-transition: all .30s ease;-o-transition: all .30s ease;transition: all .30s ease;}
.header nav ul ul li:after {display:none;}
nav li:hover ul {visibility: visible;}
.header nav ul ul li:first-child a {border-top:1px solid #5eb2d1;}
.header nav ul ul li:last-child a {border-bottom:1px solid #9acbdf;}
.header nav ul ul li:first-child li a {border-top:1px solid #fff;}
.header nav ul ul li li:first-child a {border-top:1px solid #b9d9e5;}
.header nav ul ul li:last-child li a {border-bottom:1px solid #e3e3e3;}
.header nav ul ul li:hover a...