JSFiddle - React, Tailwind, and code Playground

by arunzo

HTML

<nav class="navbar navbar-default"> 
<div class="container-fluid">   
<ul class="nav nav-list bs-sidenav ">
      <li class="nav-header">
      <a href="#" data-toggle="collapse" data-target="#One"> <font color="grey">Main One</font></a>
        <ul class = "collapse" id = "One">
            <li ><a href="http://Input_Form.jsp"> <font color="grey">Sub One</font></a></li>
            <li><a href="http://2_Input_Form.jsp"><font color="grey">Sub Two</font></a></li>
            <li><a href="http://3_Input_Form.jsp"><font color="grey">Sub Three</font></a></li>
        </ul>
    </li>   
      <li class="nav-header">
      <a href="#" data-toggle="collapse" data-target="#Two"> <font color="grey">Main Two</font></a>
        <ul class = "collapse" id = "Two">
            <li ><a href="http://Input_Form.jsp"> <font color="grey">Sub One</font></a></li>
            <li><a href="http://2_Input_Form.jsp"><font color="grey">Sub Two</font></a></li>
            <li><a href="http://3_Input_Form.jsp"><font color="grey">Sub Three</font></a></li>
        </ul>
    </li>  
</ul>
</div>
</nav>

CSS

nav ul ul {
    display:none;
}

a:focus + ul
{
    display:block;
}