JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<ul class="main">
    <li>All</li>
    <li>Answered</li>
    <li>
        Missed
        <ul>
            <li>Offline</li>
            <li>Failed to answer</li>
            <li>Canceled by user</li>
            <li>Ignored by agent</li>
            <li>Harken account inactive</li>
        </ul>
    </li>
</ul>

CSS

ul {
    cursor: pointer;
    width: 200px;
    white-space: nowrap;
    font: 14px helvetica;
 
}

li {
    position: relative;
    background: #eee;
    padding: 10px 15px;
}

li:hover {
    background: #ddd;
}

li > ul {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
} 

li:hover > ul {
    display: block;
}