JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="top-menu">
    <ul>
        <li class="menu-item-has-children"><a>Link 1</a>
            <ul>
                <li><a href="http://www.google.co.uk">Google</a></li>
                <li class="menu-item-has-children"><a href="http://www.google.co.uk">Google</a>
                    <ul>
                       <li><a href="#">Google 1</a></li>
                       <li><a href="#">Google 1</a></li>
                       <li><a href="#">Google 1</a></li>
                       <li><a href="#">Google 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
            </ul>
        </li>
        <li class="menu-item-has-children"><a>Link 2</a>
           <ul>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
            </ul>
        </li>
        <li class="menu-item-has-children"><a>Link 3</a>
            <ul>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
            </ul>
        </li>
        <li class="menu-item-has-children"><a>Link 4</a>
            <ul>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
                <li><a href="#">Google</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

#top-menu {
	list-style: none;
	margin:0;
	
}

#top-menu li {
	float:left;
	padding:12px 0;
	position: relative;
	display:block;
}

#top-menu a {
	font-size:16px;
	padding:0 10px;
	text-decoration: none;
	color:#123174;
	position: relative;
}

#top-menu a:hover {
	color:#13a4df;
}

#top-menu li ul {
	float: left;
  	left: 0;
  	opacity: 0;
  	position: absolute;
  	visibility: hidden;
  	background: #123174;
  	z-index: 45;
  	margin: 0;
  	padding: 10px 0;
  	z-index: 9999;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

#top-menu li:hover ul {
    opacity: 1;
    top: 52px;
    visibility: visible;
}
#top-menu li ul li {
    float: none;
  	width: auto;
  	list-style: none;
  	padding: 10px 20px;
  	text-align: center;
  	margin: 0 ;
  	position: relative;
}


#top-menu li ul a {
	color:#fff;
	font-family: 'Asap', sans-serif;
	text-transform: none;
	display:block;
	white-space: nowrap;
	clear: both;
}

JavaScript

$("#top-menu .menu-item-has-children a").click(function( event ) {
    event.preventDefault();
	console.log('clicked');
});