CSS导航菜单，多个子级别，全宽

Question

我正在努力通过CSS菜单实现特定的视觉效果，同时尝试编写代码并尝试解释我希望它如何工作！这是我的代码示例;

<ul class="section-parents">
    <li>
        <a href="/section.html" title="Title of page" class="page_link"><i class="fa fa-caret-right"></i> Title of the first page</a>
    </li>
    <li>
        <a href="#" title="Title of page" class="page_link second_level_link"><i class="fa fa-caret-down"></i> Title of the second parent page</a>
        <div class="section-children">
            <p>This is a short summary of what this page/section contains. Keep to a maximum of a sentence and store in a separate document type.</p>
            <ul>
                <li>
                    <a href="#" title="Title of page" class="page_link third_level_link"><i class="fa fa-caret-down"></i> Title of the next subpage</a>
                    <ul class="section-children-children">
                        <li>
                            <a href="#" title="Title of page" class="page_link"><i class="fa fa-caret-right"></i> Title of the third and longer titled page</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" title="Title of page" class="page_link"><i class="fa fa-caret-right"></i> Title of the tenth page</a>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#" title="Title of page" class="page_link"><i class="fa fa-caret-right"></i> Title of the third and longer titled page</a>
    </li>
</ul>
</div>

CSS目前有点乱，我正在使用CSS的绝对定位，并使用Jquery点击adda类，这将使子菜单出现并扩展到宽度大于它的父级，所以这就是你现在看到了;

然后点击第二个父页面的标题链接，它会展开菜单，它会显示在列表中其他LI项目的顶部...

但我想要的是，当用户点击具有子页面的链接时，它会显示隐藏的UL，但是在全宽度时，将其他列表元素向下推，所以它看起来应该是这样的;

我尝试过对不同元素的绝对和相对定位的无穷无尽的组合，但我不能为我的生活理解如何做到这一点，或者它是否甚至可能在第一时间？

是否有人可以帮助建议这是否是一个失败的原因，或者我是否采取了完全错误的方式？

谢谢！