JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-main" class="menu"><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-13"><a href="http://beta.jointviews.com/">Home</a></li>

<li id="menu-item-35" class="menu-item nu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-96"><a href="http://beta.jointviews.com/digitalmarketing/">DigitalMarketing</a>
<ul class="sub-menu">
	<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://beta.jointviews.com/digitalmarketing/digital-marketing-consultancy/">Digital Marketing Consultancy</a></li>
</ul>
</li>
</ul>

CSS

ul#menu-main {
display: block;
margin: 8px 0 0 0;
clear: both;
padding: 0 0 0 20px;
background: #ee4952;
list-style: none;
height: 60px;
font-family: BebasNeueRegular, Helvetica, Arial, sans-serif;
font-size: 18px;
}
ul#menu-main, li.bjqs-prev a, li.bjqs-next a {
background-color: #ea5f00;
}
ul#menu-main li {
float: left;
line-height: 60px;
z-index: 40;
}
ul#menu-main li a {
padding: 0 20px;
color: black;
text-decoration: none;
}

ul.sub-menu{height:0;width:0;overflow:hidden;}
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;}
ul.sub-menu {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}