JSFiddle - React, Tailwind, and code Playground

by darknessm0404

HTML

<ul class="tree">
    <li>
        <a href="#">Child</a>
        <ul>
            <li>
                <a href="#">Ancestor 1</a>
                <ul>
                    <li>
                        <a href="#">Ancestor 1A</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 1AA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 1AB</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Ancestor 1B</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 1BA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 1BB</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Ancestor 2</a>
                <ul>
                    <li>
                        <a href="#">Ancestor 2A</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 2AA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 2AB</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Ancestor 2B</a>
                        <ul>
                            <li>
                                <a href="#">Ancestor 2BA</a>
                            </li>
                            <li>
                                <a href="#">Ancestor 2BB</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
       ...

CSS

ul.tree li
{
    display:inline-block;
    position:relative;
    background-color:#CCC;
    /*white-space:nowrap;*/
}
ul.tree > li
{
}
ul.tree li > ul
{
    margin:0;
    padding:0;
    position:absolute;
    left:100%;
}