JSFiddle - React, Tailwind, and code Playground

by Siva Charan

HTML

<div class = "centeredmenu">
    <ul>
        <li><a href = "#">Home</a></li>

        <li><a href = "#">Client</a>
            <ul>
                <li><a href = "#">Create Client</a></li>
                <li><a href = "#">View Clients</a></li>
            </ul>
        </li>

        <li><a href = "#">Invoices</a>
            <ul>
                <li><a href = "#">Search</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>

        <li><a href = "#">Suppliers</a>
            <ul>
                <li><a href = "#">Add Supplier</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

.centeredmenu ul li ul { display:none; }

.centeredmenu ul li:hover > ul { display:block; }

.centeredmenu ul li ul li ul { display:none; }

.centeredmenu ul li ul li:hover > ul { display:block; }

.centeredmenu ul {
    background:#9bbe3c;
    width:99.8%;
    margin-top:0.5%;
    z-index:1;
    list-style:none;
    position:relative;
    display:inline-table;
    font-family:'Calibri' !important;
    font-size:1em;
    border:1px solid #596f1b;
}

.centeredmenu ul:after { content: ""; clear:both; display:block; }

.centeredmenu ul li { float:left; }

.centeredmenu ul li a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:14px 22px 14px 23px !important;
}

.centeredmenu ul li a:hover{ background:#586f1b; }

.centeredmenu ul li ul { background:#9bbe3c; position:absolute; top:94.5%; width:200px; }

.centeredmenu ul li ul li { float:none; position:relative; }

.centeredmenu ul li ul li ul { background:#9bbe3c; position:absolute; left:101%; top:-1%; }