JSFiddle - React, Tailwind, and code Playground

by Anisuzzaman Khan

HTML

<div id="horizontal_menu">
    <ul class="drop_menu">
    <li><a href="#" title="home" class="">Home</a></li>
    <li><a href="#" title="surnames" class="">Surnames</a></li>
    <li><a href="#" title="vital records" class="">Vital Records</a>
        <ul>
            <li><a href="#" title="Birth" class="">Birth</a></li>
            <li><a href="#" title="Marriage" class="">Marriage</a></li>
            <li><a href="#" title="Divorce" class="">Divorce</a></li>
            <li><a href="#" title="Death" class="">Death</a></li>
            <li><a href="#" title="Obiturary" class="">Obiturary</a></li>
            <li><a href="#" title="Land" class="">Land</a></li>
            <li><a href="#" title="Church" class="">Church</a></li>
            <li><a href="#" title="Military" class="">Military</a></li>
            <li><a href="#" title="Adoptions" class="">Adoptions</a></li>
            <li><a href="#" title="Education" class="">Education</a></li>
            <li><a href="#" title="Medical" class="">Medical</a></li>
            <li><a href="#" title="Newspapers" class="" >Newspapers</a></li>
        </ul></li>
    <li><a href="#" title="Photo Album" class="">Album</a></li>
    <li><a href="#" title="Relatives" class="">Relatives</a>
        <ul>
            <li><a href="#" title="Ancestors" >Ancestors</a></li>
            <li><a href="#" title="Descendants" >Descendants</a></li>
            <li><a href="#" title="Memorial" >Memorial</a></li>
        </ul></li>
    <li><a href="#" title="Sources" class="">Sources</a></li>
    <li><a href="#" title="Timeline" class="">Timeline</a></li>
    <li><a href="#" title="Index" class="">Index</a></li>

    </ul>

 </div>

CSS

body {
    overflow: hidden;
}

#horizontal_menu {
   float:left;
   width:100%;
    background-color: #E0162B;
   position:relative;
}
.drop_menu {
   clear:left;
   float:left;
    background:#E0162B;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
.drop_menu li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
.drop_menu li a {
   display:block;
   text-decoration:none;
   line-height:1.3em;
   color: #FFF;
   padding: 6px 20px 6px 6px;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#0052A5; }
.drop_menu li ul{
    text-align: left;
    left: 88px;
    top:30px;
}
.drop_menu li:hover ul {
    background:##0052A5;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display: inline-block;
    width:168px;
    text-indent:15px;
    background-color:#0052A5;
}
.drop_menu li:hover ul li a:hover { background:#E0162B; }