JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <nav>
        <ul class="default-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">about</a></li>
            <li>
              submenu <i class="fa fa-angle-right" aria-hidden="true"></i>
              <ul class="submenu">
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
              </ul> 
            </li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>  
</div>

CSS

*{
  margin:0;
  padding:0;
}
.menu nav{	
	text-align:center;
}
.menu nav ul{ 
	list-style-type:none;
}
.menu nav ul li{
	display:inline-block;	
	padding:80px 15px 0px 15px;	
	font-family: Titillium Web;
	font-weight:700;
	font-size:16px;
	color:#00adef;
	text-transform: uppercase;	
}
.menu nav ul li a{
	color:#00adef;
}
.menu nav ul li:hover{
	border-bottom:4px solid #00adef;
}
.menu nav ul li .submenu{
  display:none;
	position: absolute;    
	background-color:#1A98C8;	
  margin-top:15px;
	z-index:10;
	opacity:0.9;
	left:38%;
}
.menu nav ul li .submenu:before{
 content: '';
 position: absolute;
 left: 75px;
 top: -8px;
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 8px solid #1A98C8;
}
.menu nav ul li .submenu li{
	color:#fff;
	display:block;
	padding-top:0px;
  padding-left:0px;
	height:40px;
	border-bottom:1px solid #fff;
	opacity:1;
	line-height:40px;
  width:150px;
}
.menu nav ul li:hover .submenu{
    display:block;
}