How do I section a mega menu with HTML 5

Question

I am a bit stuck on how to section up a mega menu to use the HTML 5 outlining model. I have created a jsfiddle to show the barebones markup (please ignore the css, it is just a brain dump for the purposes of this question) and will paste this html below as well.

My confusion hinges around the logical association of list items as compared to <section /> tags. In the html provided you will see I have only used <div />s and <ul />s for structuring the markup. If I run this through a outlining tool I get a mess of content, no clear structure. In the actual menu there are about 20 headings or so in the content areas. I have no real control over what these headings are (ie whether they are <h2 />s or <h3 />s etc).

Can anyone please give me some guidance on where to go from here. I have tried wrapping all anchors that have content within their dropdowns in <h2 /> tags, then wrapping these plus the drop content in <section/> tags. This makes the outline look correct but I am not sure if it is, in fact, correct.

I had thought I might be able to use some ARIA roles but, again, I'm confused about how this works with <section />s and headings and list items!

Any advice will be much appreciated!

Thanks

Basic html outline showing the different possible contents of the mega-menu

<nav>
    <h2>Main menu</h2>
    <ul>
        <li class="has-mega">
            <a href="#">Level 1 - Mix of varying content and children</a>
            <div class="mega">
                <ul>
                    <li class="has-mega">
                        <a href="#">Level 2</a>
                        <div class="mega">
                            <ul>
                                <li class="has-mega">
                                    <a href="#">Level 3</a>
                                    <div class="mega">
                                        <h2>Heading</h2>
                                        <p>Any content can go here</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="has-mega">
                        <a href="#">Level 2</a>
                        <div class="mega">
                            <h2>Heading</h2>
                            <p>Any content can go here</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">Level 2</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="has-mega">
            <a href="#">Level 1 - Mix of children</a>
            <div class="mega">
                <ul>
                    <li class="has-mega">
                        <a href="#">Level 2</a>
                        <div class="mega">
                            <ul>
                                <li>
                                    <a href="#">Level 3</a>
                                </li>
                                <li>
                                    <a href="#">Level 3</a>
                                </li>
                                <li>
                                    <a href="#">Level 3</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">Level 2</a>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">Level 1 - No drop content at all</a>
        </li>
    </ul>
</nav>