为我的组织结构图添加子目录

Question

This is source code: and i want customize it, but i dont know how add "textgrandchild"

https://bootsnipp.com/snippets/eN3Q8

and also below is my source code:

<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->
<div class="tree">
    <ul>
        <li>
            <a href="#">Parent</a>
            <ul>
                <li>
                    <a href="#">Child</a>
                    <ul>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Child</a>
                    <ul>
                        <li><a href="#">Grand Child</a></li>
                        <li>
                            <a href="#">Grand Child</a>
                            <ul>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Grand Child</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

And when i customize, now i want add like 'Great Grand Child" in source in Myself customize, but i don't know how add ul and li Can you add one "Great Grand Child" for each on my "textgrandchild" in below code pen?

So ill understand

my customized is below https://codepen.io/anon/pen/dVQWVN