JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <body>
        <aside id="menu">
        <ul>
            <li>Menu
                <ul>
                    <li>Submenu</li>
                </ul>
            </li>
            <li>Menu 2</li>
        </ul>
        </aside>
    </body>
</html>

CSS

#menu {
    float: left;
    position: relative;
    width: 160px;
    z-index: 100;
}
#menu ul {
   // width: 160px;
    list-style: none;
    padding: 0;
}
#menu li {
    padding: 10px 0px 10px 8px;
    border-bottom: 1px solid #a0a0a0;
}
#menu ul ul {
    margin-left: 20px;
}
#menu ul ul li {
    border-top: 1px solid #a0a0a0;
    border-bottom: none;
}
#menu a:link, #menu a:visited {
    color: #000;
    text-decoration: none;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
#menu a:hover {
    color: #fff;
    background: #9f0101;
}