JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-show="buttonDisplay" id="buttonDisplayContent" class="cssFade" >
    <ul>
        <li class="normal"><a href = "#"> Home </a></li>
        <li class="subLi">
            <a href="#">About</a>
            <ul class="nested">
                <li><a href="#"> Our Team </a></li>
                <li><a href="#"> Our efforts </a></li>
            </ul>
        </li>
        <li class = "nextToNested"><a href = "#"> Blog </a></li>
        <li class="subLi"><a href="#"> Services </a>
            <ul class="nested">
                <li><a href="#"> Design </a></li>
                <li><a href="#"> Web </a></li>
                <li><a href="#"> Learn </a></li>
                <li><a href="#"> Invent </a></li>
            </ul>
        </li>
        <li class = "nextToNested"><a href="#"> Portfolio </a></li>
        <li class = "normal"><a href="#"> Contact </a></li>
    </ul>
</div>

CSS

/*-------  Defaults  -------*/
*{
    vertical-align: middle;
    line-height: normal;
    font-
}
ul{
    list-style: none outside none;
    padding: 0;
    margin: 0;
}
li{
    display:inline-block;
}
a{
    text-decoration:none;
    font-weight:bold;
    color:inherit;
}

/*-------  Parent List  -------*/
div#buttonDisplayContent > ul,
div#buttonDisplayContent > ul > li{
    font-size:34px;
    line-height:34px;
}
div#buttonDisplayContent > ul > li{
    display: list-item;
    color:#eee;
}
div#buttonDisplayContent > ul > li:hover{
    background-color:#000;
}

/*-------  Nested Lists  -------*/
div#buttonDisplayContent > ul > li > ul{
    display: inline-block;
}
div#buttonDisplayContent > ul > li > ul,
div#buttonDisplayContent > ul > li > ul > li{
    font-size: 14px;
    line-height:14px;
    color: #ccc;
    margin: auto 10px;
}
div#buttonDisplayContent > ul > li > ul > li:hover{
    color: yellow;
}