JSFiddle - React, Tailwind, and code Playground

by Alessio

HTML

<div class="sidenav">
        <h3>Photo Archives</h3>
        <ul>
                <li><a href="../photos.html" class="selected" >2015</a>
                    <ul>
                        <li><a href="2015.html">Singapore</a></li><li><a href="2015.html">England</a></li>
                    </ul>
                </li><li><a href="2014.html">2014</a>
                </li><li><a href="2013.html">2013</a>
                </li><li><a href="2012.html">2012</a>
                </li><li><a href="2011.html">2011</a>
                </li><li><a href="2010.html">2010</a>
                        <ul>
                            <li><a href="2010.html" >Melbourne</a></li><li><a href="2010.html">Philippines</a></li>
                        </ul>
                    </li><li><a href="2009.html">2009</a>
                </li>
            </ul>
    </div>

CSS

.sidenav {
    padding-top: 5%;
    padding-left: 2%;
    display: table-cell;
    position: relative;
    width: 20%;
    vertical-align: top;
    background-color: #c01f2c;
    text-align: center;
    /*border: 1px solid green;*/
    }

    .sidenav h3 { padding-bottom: 15px;}
    .sidenav ul{ position:relative; }

        .sidenav ul li:hover, .selected{
            background-color: #2e2e2e; 
        }
            .sidenav ul li a {
                color:white;
                display: block;
                line-height: 3rem;
                font-size: 1.25rem;
            }

            .sidenav ul li:hover ul {
                display: block;
                position: relative;
            }

            .sidenav ul li ul li:hover, .selected{
                border-left: 5px solid white;
            }

            .sidenav ul ul {
                position: absolute;
                display: none;
                width: inherit;
                background-color: #c01f2c;
                padding-right: 10px;
            }

            .sidenav ul ul a {
                font-size: 1rem;
                text-align: right;
                padding-right: 10px;
}


.sidenav ul li a.selected + ul {
                position: relative;
                display: block;
                width: inherit;
                background-color: #c01f2c;
                padding-right: 10px;
            }