JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cnav">
     <ul>
          <li><a href="#">Home</a>
                 <ul 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</a>
                 <ul 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</a>
                 <ul 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>

CSS

.cnav {
    position: relative;
    display: block;
}

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

.cnav ul > li { 
    display: block;
    float: left;
    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%;
}

.cnav ul li a:focus + ul.sub { display: block; position: absolute; left: 0px; }