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

#buttonDisplayContent ul{list-style-type:none;padding:0px}

#buttonDisplayContent ul ul{list-style-type:none;padding:0px}

#buttonDisplayContent ul a{text-decoration:none;color:#fff;font-size:50px;font-weight:bold}

#buttonDisplayContent ul ul a{text-decoration:none;color:lightgray;font-size:40px;font-weight:bold}

#buttonDisplayContent li{margin-bottom:0.1%}

.subLi{margin:0px;padding:0px;list-style-type:none}

.nested{margin-left:0px;display:inline}

.nested li{display:inline-block;padding-bottom:6px;padding-right:1%;padding-left:1%;padding-top:8px}
#buttonDisplayContent .nested li:hover a{color:yellow;}

#buttonDisplayContent ul li:hover{background-color:black}