JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Reinvent Yourself</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Vision/Mission & Core Values</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Leverage The Expertise</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Develop Human Capital</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Choose Your Talent</a>
                    <ul>
                        <li><a href="#">Point1</a></li>
                        <li><a href="#">Point2</a></li>
                        <li><a href="#">Point3</a></li>
                        <li><a href="#">Point4</a></li>
                    </ul>
                </li>
                <li><a href="#">Outsource Your Non-Core</a>
                    <ul>
                       ...

CSS

nav {
    text-align: left;
}

    nav ul ul {
        display: none;
        z-index: 99;
    }

    nav ul li:hover > ul {
        display: block;
    }


    nav ul {
        background: url(../images/nav_bg.jpg) repeat-x;
        list-style: none;
        position: relative;
        display: inline-table;
        
    }

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

        nav ul li {
            float: left;
            z-index: 99;
			background-color:blue;
        }

            nav ul li:hover {
                background: #210300;
            }

                nav ul li:hover a {
                    color: #fff;
                }

            nav ul li a {
                display: block;
                padding: 10px 69px;
                color: white;
                text-decoration: none;
            }


        nav ul ul {
            background: #5f6975;
            border-radius: 0px;
            padding: 0;
            position: absolute;
            top: 100%;
        }

            nav ul ul li {
                float: none;
                position: relative;
            }

                nav ul ul li a {
                    padding: 10px 40px;
                    color: white;
                    background: url(../images/nav_bg.jpg) repeat-x;
                    
                }

                    nav ul ul li a:hover {
                        background: #210300;
                    }

            nav ul ul ul {
                position: absolute;
                left: 100%;
                top: 0;
            }