JSFiddle - React, Tailwind, and code Playground

HTML

<div class="primary-menu-container"><ul id="primary-menu-list" class="menu-wrapper"><li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="">foo A</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-31"><a href="">foo b</a>
<ul class="sub-menu">
	<li id="menu-item-22" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22"><a href="">foo bb</a></li>
</ul>
</li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="">foo c</a></li>
</ul></div>

CSS

#site-navigation {
	position: relative;
	float:right;
	margin-top:-50px;
}

.menu-item-type-taxonomy {
	list-style: none;
}

a.menu-wrapper {
    text-decoration: none;
}

ul.menu-wrapper {
	list-style-type: none;
	display:flex;  
	list-style:none;
}

li.menu-item {
	list-style:none;
	margin:10px;
}

a.menu-wrapper{
    color:#000000;
}

ul.menu-wrapper li >ul {
    display: none;
}
ul.menu-wrapper li:hover >ul {
    display:block;
}