JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<div id="centeredmenu">
<ul>
<li><a href="#" style="color: #C41F3B;">Death Knight</a>
<ul>
<li><a href="#">Unholy</a></li>
<li><a href="#">Frost</a></li>
</ul>
</li>
<li><a href="#" style="color: #FF7D0A;">Druid</a>
<ul>
<li><a href="#">Balance</a></li>
<li><a href="#">Restoration</a></li>
<li><a href="#">Feral</a></li>
</ul>
</li>
<li><a href="#" style="color: #ABD473;">Hunter</a>
<ul>
<li><a href="#">Survival</a></li>
<li><a href="#">Marksman</a></li>
<li><a href="#">Beast Master</a></li>
</ul>
</li>
<li><a href="#" style="color: #69CCF0;">Mage</a>
<ul>
<li><a href="#">Frost</a></li>
</ul>
</li>
<li><a href="#" style="color: #00FF96;">Monk</a>
<ul>
<li><a href="#">Mistweaver</a></li>
<li><a href="#">Windwalker</a></li>
</ul>
</li>
<li><a href="#" style="color: #F58CBA;">Paladin</a>
<ul>
<li><a href="holy_paladin_intro.html">Holy</a></li>
<li><a href="#">Retribution</a></li>
</ul>
</li>
<li><a href="#" style="color: #FFFFFF;">Priest</a>
<ul>
<li><a href="#">Holy</a></li>
<li><a href="#">Discipline</a></li>
<li><a href="#">Shadow</a></li>
</ul>
</li>
<li><a href="#" style="color: #FFF569;">Rogue</a>
<ul>
<li><a href="#">Subtlety</a></li>
</ul>
</li>
<li><a href="#" style="color: #0070DE;">Shaman</a>
<ul>
<li><a href="#">Elemental</a></li>
<li><a href="#">Enhancement</a></li>
<li><a href="#">Restoration</a></li>
</ul>
</li>
<li><a href="#" style="color: #9482C9;">Warlock</a>
<ul>
<li><a href="#">Destruction</a></li>
<li><a href="#">Demonology</a></li>
<li><a href="#">Affliction</a></li>
</ul>
</li>
<li><a href="#" style="color: #C79C6E;">Warrior</a>
<ul class="last">
<li><a href="arms_warrior_intro.html">Arms</a></li>
</ul>
</li>
</ul>
</div>

CSS

#centeredmenu{clear:both;float:left;margin:0;padding:0;width:100%;font:normal verdana,tahoma,sans-serif;z-index:1000;position:relative;background:#161616;border-top:1px solid #000000;border-bottom:1px solid #000000;-webkit-box-shadow:inset 0px 1px 0 0px rgba(255,255,255,.1);-moz-box-shadow:inset 0px 1px 0 0px rgba(255,255,255,.1);box-shadow:inset 0px 1px 0 0px rgba(255,255,255,.1);height:35px;}#centeredmenu ul{margin:0;padding:0;list-style:none;float:right;position:relative;right:50%;}#centeredmenu ul li{padding:0;float:left;position:relative;left:50%;border-width:1px 1px 0px 1px;border-style:solid;border-color:transparent #333 #000 #070707;text-shadow:0px 1px 0px #000;line-height:40px;}#centeredmenu ul li a{display:block;margin:0;padding:9px 13px 9px;font-size:1em;line-height:1em;text-decoration:none;color:#444;}#centeredmenu ul li.active a{color:#fff;background:#000;}#centeredmenu ul li a:hover{background:#36f;color:#fff;border-bottom:1px solid #03f;}#centeredmenu ul li:hover a,#centeredmenu ul li.hover a{background:#36f;color:#fff;border-bottom:1px solid #03f;}#centeredmenu ul ul{display:none;position:absolute;top:35px;left:0;right:auto;width:10em;}#centeredmenu ul ul li{left:auto;margin:0;clear:left;width:100%;border:none;}#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-weight:normal;line-height:1.4em;border:1px solid #000000;background:#161616;}#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:#36f;color:#fff;}#centeredmenu ul ul.last{left:auto;right:0;}#centeredmenu ul li:hover ul,#centeredmenu ul li.hover ul{display:block;}

#centeredmenu
{
   float: none;
   width: auto;
}

#centeredmenu > ul
{
   right: auto;
    float: none;
    text-align: center;
    white-space:nowrap;
}

#centeredmenu > ul > li
{
    float: none; 
    display: inline-block;
    left: auto;
}