JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="main-menu">
  <ul class="sf-menu sf-js-enabled">
    <li><a href="index.html" class="sf-with-ul">company<span class="menu-arrow"></span><em></em></a>
      <ul >
        <li><a href="#">Welcome Message</a></li>
        <li class=""><a href="#" class="sf-with-ul">Company Profile<span class="menu-arrow"></span></a>
          <ul>
            <li><a href="#">Our Capabilities</a></li>
            <li><a href="#">Advantages</a></li>
            <li><a href="#">Work Team</a></li>
            <li><a href="#">Partnership</a></li>
            <li><a href="#">Support</a></li>
          </ul>
        </li>
        <li><a href="#">Our History</a></li>
        <li><a href="#">Testimonials</a></li>
      </ul>
    </li>
    <li class="current"><a href="services.html">services<em></em></a></li>
    <li><a href="about.html">about us<em></em></a></li>
    <li><a href="projects.html">projects<em></em></a></li>
    <li><a href="contacts.html">contacts<em></em></a></li>
  </ul>
  <div class="clear"></div>
</nav>

CSS

nav{
	position:relative;
	margin:0px 0 0 0;
	background:url('http://livedemo00.template-help.com/wt_42677/images/nav.png') repeat-x #e7e7e7;
	min-height:68px;
	
}
ul,
li {
    list-style: none;
}
.sf-menu ul
{
	position:absolute;
	top:-999px;
	display:none;
}
.sf-menu ul li{
	width:100%
	}
.sf-menu li{
	float:left;
	position:relative
}
.sf-menu>li>a{
	display:block;
	position:relative;
	font-size:12px;
	line-height:17px;
	color:#2f2e2e;
	font-weight:bold;
	text-transform:uppercase;
	width:189px;
	padding:27px 0 24px;
	text-align:center;
	position:relative;
	overflow:hidden;
}
.sf-menu > li > a:hover,
.sf-menu > li.current > a,
.sf-menu > li.sfHover > a{
  
}

.sf-menu>li>a>em {    				
	display:block;
	width:0;
	height:0;
	position:absolute;
	bottom:200%;
	left:50%;
	right:50%;
	top:auto;
	background:#fa5758;
	height:3px;
}

ul li:hover>ul{
	
	display:block;
	-webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
	-o-animation: fadeIn 1s;
	animation: fadeIn 1s;

}
ul li>ul{
	
	display:none;
	
}


.sf-menu>li>a:hover>em,.sf-menu>li.current>a>em,.sf-menu>li.sfHover>a>em{
	bottom:0;left:0;right:0;width:100%;
}
.sf-menu>li{border-left:1px solid #d0d0d0;
}
.sf-menu>li:first-child{border-left:none;
}
.sf-menu a{}.sf-menu>li>ul,.sf-menu>li.sfHover>ul{left:0;top:68px;width:190px;padding:22px 0 24px 0;z-index:99;background:url('http://livedemo00.template-help.com/wt_42677/images/sub_ul1.png') repeat-x #676464;}
.sf-menu>li>ul>li{}.sf-menu>li>ul>li>a{background:url('http://livedemo00.template-help.com/wt_42677/images/sub_li1.png') 0 -50px repeat-x;color:#fff;
}
.sf-menu li li a:hover,.sf-menu li.sfHover li.sfHover>a{background-position:0 0;background-color:#b7b7b7;color:#454545;
}
.sf-menu li li ul{left:148px;top:-22px;width:190px;padding:22px 0 23px 0;z-index:99;background:url('../images/theme/sub_ul2.png') repeat-x;
}
.sf-menu li li li{}.sf-menu li li a{font-size:11px;color:#fff;text-transform:uppercase;display:block;padding:5px 0 5px...

JavaScript

$(document).ready(function () {
  $('.sf-menu li').hover(function () {
    $(this).addClass('sfHover');
    }, function () {
    $(this).removeClass('sfHover');
  });
});