JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
	<li class="menu__item">
		<a href="#" class="link">About</a>
		<ul class="submenu">
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
		</ul>
	</li>
	<li class="menu__item">
		<a href="#" class="link">Apparel</a>
		<ul class="submenu">
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
		</ul>
	</li>
	<li class="menu__item">
		<a href="#" class="link">Surf apparel</a>
		<ul class="submenu">
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
		</ul>
	</li>
	<li class="menu__item">
		<a href="#" class="link">Windsurf</a>
		<ul class="submenu">
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
		</ul>
	</li>
	<li class="menu__item">
		<a href="#" class="link">Kitesurf</a>
		<ul class="submenu">
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
			<li class="submenu__item"><a href="#" class="link">Yoba</a></li>
		</ul>
	</li>
	<li class="menu__item">
		<a href="#" class="link">Accessories</a>
		<ul class="submenu">
			<li...

CSS

*,
*:before,
*:after {
    -webkit-box-sizing: box-sizing;
       -moz-box-sizing: box-sizing;
            box-sizing: box-sizing;
}
.menu,
.submenu {
    margin: 0;
    padding: 0;

    list-style: none;
}
.menu {
    width: 320px;
}

.menu__item {
    position: relative;

    background-color: #00d8fe;
}
.menu__item:hover {
    z-index: 2;
}
.link {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;

    position: relative;
    z-index: 1;

    display: block;

    padding: 10px 48px;

    text-decoration: none;
    text-transform: uppercase;

    color: #000;
}
.menu__item:hover:before,
.submenu__item:hover:before {
    position: absolute;
    top: -20px;
    right: 0;
    bottom: -20px;
    left: 0;

    content: '';

    background-color: #4e4b3e;
}
.submenu {
    position: absolute;
    top: 0;
    left: 100%;

    display: none;
}
.menu__item:hover .submenu {
    display: block;
}
.submenu__item {
    position: relative;

    background-color: #7be8ff;
}
.submenu__item:hover {
    z-index: 2;
}