[TYPO3-english] How to build a mega menu with this special strcuture

[TSniper]

Hi all,

I want to build a mega menu but i want to delay browsing the deep-links (3rd level) in a second place so in the HTML, the 3rd level with the deep links will be in the last <li>


This is an example for what i want to build with typoscript:

<nav id="mainmenu">
    <section class="inner-mainmenu">
        <ul>
            <li id="menu-pid-58" class="first-li"><a href="products/">Consumer</a>

                <div class="navChild clr" style="display: none;">
                    <div class="first-lvl-img" style="display: block;">
                        <div class="first-lvl-subtile"></div>
                    </div>
                    <div class="navBackground"></div>
                    <ul class="productSub" style="margin-left: auto;">
                        <li class="secondlvl-li"><a href="link-to-page">
                            <figure>
                                <figcaption>Consumer</figcaption>
                            </figure>
                        </a></li>
                        <li class="secondlvl-li"><a href="link-to-page">
                            <figure>
                                <figcaption>Projects</figcaption>
                            </figure>
                        </a></li>
                        <li class="secondlvl-li"><a href="link-to-page">
                            <figure>
                                <figcaption>Service</figcaption>
                            </figure>
                        </a></li>
                        <li class="secondlvl-li">
                            <figure>
                                <figcaption>Knowledge</figcaption>
                            </figure>
                        </li>
                        <li class="deep-links">
                            <ul>
                                <li>
                                    <ul class="deep-link-wrap">
                                        <li><a href="link-to-page">Product</a></li>
                                        <li><a href="link-to-page">Accessories</a></li>
                                        <li><a href="link-to-page">Why it</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="deep-link-wrap">
                                        <li><a href="link-to-page">Guides</a></li>
                                        <li><a href="link-to-page"> magazine </a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="deep-link-wrap">
                                        <li><a href="link-to-page">Service</a></li>
                                        <li>
                                            <a href="link-to-page">Instruction</a></li>
                                        <li><a href="link-to-page">Find a </a></li>
                                        <li><a href="link-to-page">The guarantee</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="deep-link-wrap">
                                        <li><a href="link-to-page">FAQs</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </li>
            <li id="menu-pid-51" class="first-li" style="height: auto;"><a href="link-to-page">Contractor</a>
                same structure
            </li>
            <li id="menu-pid-21" class="first-li" style="height: auto;"><a href="link-to-page">Contractor</a>
                same structure
            </li>
        </ul>

    </section>
</nav>


Thanks in advance for any help.