JSFiddle - React, Tailwind, and code Playground

by Shanid

HTML

<div class="wrapper">
    <aside>
        <ul class="sidemenu">
            <li><a href="#">Menu 1</a></li>
            <li>
                <a href="#">Menu 2</a>
                <ul>
                    <li><a href="#">Subenu 1</a>
                      <ul>
                        <li><a href="#">Subenu 1</a></li>
                        <li><a href="#">Subenu 2</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Subenu 2</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
        </ul>
    </aside>
    <div class="content">
        Main content        
    </div>    
<div>

CSS

*{
 font-family: arial;
 font-size: 12px;    
}

.wrapper{
    overflow: hidden;
    background: #eee;
}

aside{
    float: left;
    width: 30%;
    background: #ddd;
}
.content{
    float:left;
    width: 70%;
}
ul.sidemenu{
    padding:0;
    margin:0;  
}
.sidemenu li{
    list-style:none;
}

.sidemenu li a{
   padding: 10px;
   display:block;
   color:#000;
   border-bottom: 1px solid #fff;
}
.sidemenu li li a{
    background: #999;
}
.sidemenu li ul{
    display:none;
}
.sidemenu li:hover >ul{
    display:block;
}