JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="clearfix"></div>
<nav>
    <input id="Portfolio" type="radio" name="menu" hidden>
    <ul>
        <li><a href="index.html" accesskey="1"> Home </a> </li>
        <li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>
        
        <ul id=submenu type="list">
              <li><a href="Commercial.html">Commercial</a> </li>
              <li><a href="Residential.html">Residential</a> </li>
              <li><a href="heritage.html">Heritage</a> </li>
              <li><a href="Rennovations.html">Rennovations</a> </li>
        </ul>
    
        <li><a href="services.html" accesskey="3"> Services </a> </li>
        <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
        <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
     </ul>
</nav>

CSS

/**Navigation */
nav{
    border: 1px solid red ;
    float: left;
    margin-right:35px;
    min-height:280px;
    }


nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}   
/**Content */
#section{
    background-color: ;
    border: 1px solid;
    font: normal 12px Helvetica, Arial, sans-serif; 
    margin-left:180px;
 }



 .clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;

}
#Portfolio:checked +ul ul#submenu{
 height:80px;   
}
#submenu{
    overflow:hidden;
    height:0px;
    margin:0;
}
a[accesskey="2"]{
    color:blue;
    cursor:pointer;
    text-decoration:underline;
}