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

Question

这是源代码：我想要自定义它，但我不知道如何添加＆＃34; textgrandchild＆＃34;

https://bootsnipp.com/snippets/eN3Q8

以下是我的源代码：

<!--
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>

当我自定义时，现在我想添加像“大孩子”这样的＃34;在我自己的源代码中自定义，但我不知道如何添加ul和li 你能加一个＆＃34;伟大的大孩子＆＃34;对于我的＆＃34; textgrandchild＆＃34;在下面的代码笔？

很难理解

我的定制如下     https://codepen.io/anon/pen/dVQWVN