JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="topnav">
               <li class="on"><a href="read">Read</a><!-- class="on" because it is the default option -->
                <span>
                    <a href="#">Books</a>
                    <a href="#">Newspapers</a>
                </span>
            </li><!-- end ul li -->
                
            <li class="off"><a href="watch">Watch</a>
                <span>
                    <a href="#">Television</a>
                    <a href="#">Movies</a>
                </span>                
            </li><!-- end ul li -->
                
            <li><a href="see">See</a>
                <span>
                    <a href="#">Sights</a>
                    <a href="#">No Evil</a>
                </span>                   
            </li><!-- end ul li -->   
         </ul><!--end of nav-->

CSS

ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 100%;
    height:2.187em;
    list-style: none;
    position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
    font-size: 1em;
    background: #0d59a6 url(../images/topnav_bg.png) repeat-x center top;
}

ul#topnav li {
    float: left;
    margin: 0;
    padding: 0;
}

ul#topnav li a {
    padding: .4em .937em;
    display: block;
    border-right:1px solid #828282;
    color: white;
    text-decoration: none;
    font-weight:bold;
}

ul#topnav li.on  li:active{color:#828282;}
ul#topnav li:hover {background: #f3f3f3; color:#828282;}
ul#topnav li:visited {color:#828282;}
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

ul#topnav li a:hover, ul#topnav li a:active, ul#topnav li a:visited{
    color:#828282;
}

ul#topnav li:hover a{
    color:#828282;
}


ul#topnav li span a {
    color:#828282;
    border:none;
}

ul#topnav li span {
    float: left;
    padding: .475em 0;
    position: absolute;
    left: 0; top:2.187em;
    display: none; /*--Hide by default--*/
    font-weight:normal;
    width: 100%;
    font-size:0.875em;
    text-align:left;
    background: #f3f3f3;
    color: #828282;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; color:#828282;} /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}

#topnav li.off ul, #topnav li.on ul {  
  display: none;
  position: relative;
  top: 1.25em;
  height: 1.875em;
  left: 0;
  padding-top:0;
} /*put the subnavs below and hide them all*/

#topnav li.off span {
  z-index:1;
}

#topnav li.on li:hover {
    color:#828282;
}

#topnav li.on span {  
  display: block;
} /*display active subnav list*/

/* IE Fix */
#topnav li.off ul,...