JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="box">
    <ul>
        <li> <a href="#"> Item 1 </a> 
        </li>
        <li> <a href="#"> Item 2 </a> 
            <ul>
                <li> <a href="#"> Subset Item 2</a> 
                </li>
                <li> <a href="#"> Subset Item 2</a> 
                </li>
            </ul>
        </li>
        <li> <a href="#"> Item 3 </a> 
        </li>
        <li> <a href="#"> Item 4 </a> 
        </li>
        <li> <a href="#"> Item 5 </a> 
        </li>
    </ul>
</div>

CSS

.box {
    width:130px;
}
.box ul {
    padding:0;
    margin:0;
    list-style-type:none;
}
.box ul li {
    margin-bottom:1px;
    position:relative;
}
.box ul li a {
    display:block;
    padding:5px;
    background-color:#ff0099;
    color:#fff;
    font:bold 20px arial;
    text-decoration:none;
}
.box ul li a:hover {
    background-color:#b2086e;
    color:#fff;
}
.box ul li ul {
    position:absolute;
    left:100%;
    top: 0;
    margin-left: 1px;
}
.box ul li ul li a {
    width: 135px;
}