如何创建族树的循环表示

Question

我编辑了我从this codepen获得的家谱代码，以显示不同家庭世代的不同颜色。这是标记：

<div class="tree">
<ul>
    <li>
        <a href="#" class="g1">LOREM (G1)</a>
        <ul>
            <li>
                <a href="#" class="g2">IPSUM (G2)</a>
                <ul>
                    <li>
                        <a href="#" class="g3">DOLOR (G3)</a>
                        <ul>
                            <li>
                                <a href="#" class="g4">SIT (G4)</a>
                                <ul>
                                    <li>
                                        <a href="#" class="g5">AMET (G5)</a>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">CONSECTETUER (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">ADIPISCING</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">ELIT (G5)</a>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">MAECENAS (G5)</a>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">PORTTITOR (G5)</a>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">CONGUE (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">MASSA</a>
                                                <ul class="hide">
                                                    <li>
                                                        <a href="#" class="g7">FUSCE</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">POSUERE (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">MAGNA</a>
                                                <ul class="hide">
                                                    <li>
                                                        <a href="#" class="g7">SED</a>
                                                        <ul class="hide">
                                                            <li>
                                                                <a href="#" class="g8">PULVINAR</a>
                                                            </li>
                                                            <li>
                                                                <a href="#" class="g8">ULTRICIES</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="g7">PURUS</a>
                                                        <ul class="hide">
                                                            <li>
                                                                <a href="#" class="g8">LECTUS</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="g7">MALESUADA</a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="g7">LIBERO</a>
                                                        <ul class="hide">
                                                            <li>
                                                                <a href="#" class="g8">COMMODO</a>
                                                            </li>
                                                            <li>
                                                                <a href="#" class="g8">VIVERRA</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="g7">IMPERDIET</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">VIVAMUS</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">PELLENTESQUE</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">HABITANT (G5)</a>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">MORBI (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">TRISTIQUE</a>
                                                <ul class="hide">
                                                    <li>
                                                        <a href="#" class="g7">SENECTUS</a>
                                                        <ul class="hide">
                                                            <li>
                                                                <a href="#" class="g8">MALESUADA</a>
                                                            </li>
                                                            <li>
                                                                <a href="#" class="g8">EGESTAS</a>
                                                            </li>
                                                            <li>
                                                                <a href="#" class="g8">PHARETRA</a>
                                                                <ul class="hide">
                                                                    <li>
                                                                        <a href="#" class="g9">NONUMMY</a>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li>
                                                                <a href="#" class="g8">MAURIS</a>
                                                            </li>
                                                            <li>
                                                                <a href="#" class="g8">AENEAN</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">SCELERISQUE</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">VULPUTATE</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">PRETIUM</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">VENENATIS (G5)</a>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">VULPUTATE (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">TELLUS</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">LAOREET</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">ELEIFEND</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">VULPUTATE</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">MENE (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">SEM</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">ERIC</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">KUDIEYIN (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">JOS</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">TOYE</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">ROSE</a>
                                                <ul class="hide">
                                                    <li>
                                                        <a href="#" class="g7">SAMUEL</a>
                                                        <ul class="hide">
                                                            <li>
                                                                <a href="#" class="g8">MEYIWA</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">HELEN</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">MONSIGNOR</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">UKEGBULI (G5)</a>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">METSERUNEKPE (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">ABIJOKE</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">DUPE</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">UYAULITSEMI (G5)</a>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">PIGIN (G5)</a>
                                        <ul class="hide">
                                            <li>
                                                <a href="#" class="g6">SAMUEL</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">REV. FELIX</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">THOMPSON</a>
                                            </li>
                                            <li>
                                                <a href="#" class="g6">CHRISTIANA</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="g5">UROWOLI (G5)</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>                
        </ul>
    </li>
</ul>

在第五代或任何一代中添加最多18个项目会使链接变得过于窒息。 我正在考虑创建这个家谱的循环表示，以节省空间，并提高可读性。一个例子是。

有没有更好的方法来做到这一点，或者有人能指出我如何实现像图像这样的东西？