JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="flexmenu">
    <ul>
        <li><a href="#">Test</a>
            <ul>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
            </ul>
        </li>        
   </ul>
</nav>
    
<div id="content"><p>Content</p></div>

<nav id="floatedmenu">
    <ul>
        <li><a href="#">Test</a>
            <ul>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
            </ul>
        </li>        
   </ul>
</nav>
    
<div id="content2"><p>Content2</p></div>

CSS

#content, #content2 {
background-color:#AABBCC;
}

#content2{
clear:both;
}

#floatedmenu {
    float:left;
    margin:0;
    padding:0;
    width:100%;
    position:relative;
}

#floatedmenu ul {
    clear:left;
    margin:0;
    padding:0;
    float:right;
    position:relative;
    right:50%;
}

#floatedmenu ul li {
    text-align:center;
    float:left;
    position:relative;
    left:50%;
}

#floatedmenu ul ul {
    display:none;
    position:absolute;
    right:auto;
}

#floatedmenu ul li:hover ul{
display:block;
}

#floatedmenu ul ul li {
    left:auto;
    margin:0;
    clear:left;
    width:100%;
}

#floatedmenu ul li a {
    display:block;
}

#flexmenu ul{    
display: -webkit-flex;
-webkit-flex-direction:row;
-webkit-justify-content:center;
}

#flexmenu ul li a{
display:block;
text-align:center;
}

#flexmenu ul li:hover ul{
display:block;
}

#flexmenu ul ul{
display:none;
}