JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="cnav">
     <ul>
          <li><a href="#Home">Home</a>
                 <ul id="Home" class="sub">
                     <li><a href="/about">About Us</a></li>
                     <li><a href="/page1">Some Page</a></li>
                     <li><a href="/page2">Another Page</a></li>
                 </ul>
          </li>
          <li><a href="#Products">Products</a>
                 <ul id="Products" class="sub">
                     <li><a href="/about">About Us</a></li>
                     <li><a href="/page1">Some Page</a></li>
                     <li><a href="/page2">Another Page</a></li>
                 </ul>
          </li>
          <li><a href="#Support">Support</a>
                 <ul id="Support" class="sub">
                     <li><a href="/about">About Us</a></li>
                     <li><a href="/page1">Some Page</a></li>
                     <li><a href="/page2">Another Page</a></li>
                 </ul>
          </li>
     </ul>
	</div>
</body>
</html>

CSS

.cnav {
    position: relative;
    display: block;
    background-color: hotpink;

    -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    transition: all 1s;
}


.cnav ul {
    list-style-type: none;
}

.cnav ul > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.cnav ul li > a {
    font-size:14px;
    height:38px;
    width:100%;
    line-height:38px;
    border-bottom: 1px solid #c4c4c4;
    border-top: 1px solid white;
    color: #3f3f3f;
}

.cnav ul li > .sub {
    display: none;
    background: rgb(255,255,255);
    margin-top:0px;
    width:100%;
}

#Home:target{
display: block;  left: 0px;
}
#Products:target{
display: block;  left: 0px;
}
#Support:target{
display: block;  left: 0px;
}