JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="centeredmenu">
<ul>
<li><a href="#">HOME</a>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li class="active"><a href="#" class="active">DISCOVER</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">ABOUT</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">Tab four</a>
<ul class="last">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
</ul>
</div>
</body>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato);
body {font-family:Lato;}
html,body {
    margin:0;
    padding:0;
    height:100%;
}
#centeredmenu {
    background-color:rgb(18,29,33);
    clear:both;
    float:left;
    margin:0;
    padding:0;
    width:100%;
    font-family:Lato;font-weight:normal; 
    font-size:90%; 
    z-index:1000; 
    position:relative;
}

#centeredmenu ul {
    margin:0;
    padding:0;
    list-style:none;

    position:relative;

}
#centeredmenu ul li {
    margin:0 0 0 0px;
    padding:0;
    float:left;
    position:relative;
}
#centeredmenu ul li a {
    display:block;
    margin:0;
    padding: 1em;
    font-size:1em;
    line-height:1em;
    background:rgb(18,29,33);
    text-decoration:none;
    color:rgb(241,241,241);
    font-family:Lato;

}
#centeredmenu ul li.active a {
    color:rgb(241,241,241);
    background:rgb(38,47,50);
}
#centeredmenu ul li a:hover {
    background:#36f;
    color:rgb(241,241,241);
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { 
    background:rgb(38,47,50);
    color:rgb(241,241,241);
}

#centeredmenu ul ul {
    display:none; 
    position:absolute;
    top: 2.9em;
    left:0;
    right:auto;
    width:10em; 
}
#centeredmenu ul ul li {
    left:auto; 
    margin:0; 
    clear:left;
    width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { 
    font-size:.8em;
    font-weight:normal;
    background:rgb(38,47,50);
    color:rgb(185,191,193);
    line-height:1.4em;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover {
    background:rgb(58,59,65);
    color:rgb(241,241,241);
}

#centeredmenu ul ul.last {
    left:auto; 
    right:0; 
}


#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul {
    display:block; 
}