JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tree-container">
    <ul>
        <li>0123456789abcdef
            <ul>
                <li>0123451234567
                    <ul>
                        <li>0123
                            <ul>
                                <li>01
                                    <ul>
                                        <li>0
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

/* Aesthetics*/
#tree-container {
    border: 0px;
    font-size: 20pt;
    margin: 20px; 
    padding: 0px;
}

ul {
    background: #fd4;
    background: -webkit-linear-gradient(315deg, #fc4, #fe3, #fc4);
    background: -moz-linear-gradient(315deg, #fc4, #fe3, #fc4);
    border: inset #da3;    
    box-shadow: 5px 10px 20px #000;
    cursor: default;
    list-type: none;
    padding: 4px;
}


li {
    border: outset #da3;    
    padding:1px 5px 1px 5px;
}



/* Tree effects */
ul {
    display: none; 
    position: absolute;
}

/* Always display the top level */
#tree-container > ul {
    display: inline;
}

/* Display additional levels when requested by hovering over the previous level*/
ul:hover > li > ul {
    display: inline;
    top: 99%;
    left: 5%;
}