JSFiddle - React, Tailwind, and code Playground

HTML

<div id="MainMenu">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">About</a>
            <ul>
                <li><a href="#">The Product</a></li>
                <li><a href="#">Meet The Team</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
            <ul>
                <li>
                    <a href="#">Business Hours</a>
                    <ul>
                        <li><a href="#">Week Days</a></li>
                        <li><a href="#">Weekends</a></li>
                    </ul>
                </li>
                <li><a href="#">Directions</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

#nav > li {
    float:left;
    margin:5px;
}
#nav > li > a {
    color:green;
}

#nav > li > ul > li a {
    color:red;   
}