How to create a megamenu in this situation?

Question

<ul id="menu-main-menu">
    <li class="has-mega-menu">
        <a href="#">Getting Pregnant</a>
        <ul class="sub-menu">
            <h3>Topics</h3>
        </ul>
    </li>
    <li><a href="#">Pregnancy</a></li>
    <li><a href="#">After Pregnancy</a></li>
    <li><a href="#">New Born</a></li>
    <li><a href="#">New Parents</a></li>
</ul>

The thing is that the h3 or p isnt allowed as a child of a ul. In my situattion I need to add a title like "Topics" then below some lis . HWhat is the best option to do this? The correct one? Thanks

Use a span tag instead of h3. Then in CSS style the span tag to look like an h3. — dowomenfart, Mar 25 '15 at 19:26
@IkoTikashi put span inside of li http://stackoverflow.com/questions/17268834/nesting-html-tags-inside-ul-other-than-li — dowomenfart, Mar 25 '15 at 19:33
@dowomenfart I know, but using `` instead of `
` (as you stated) is not correct , since there's no `

score 0 · Answer 1 · answered Mar 25 '15 at 19:33

Found the solution : Remove the

<ul class="sub-menu">
     <h3>Topics</h3>
</ul>

and add a div instead. So this way w3c will validate it. So we will have:

                    <ul id="menu-main-menu">
                        <li class="has-mega-menu">
                            <a href="#">Getting Pregnant</a>
                            <div >
                                <h2></h2>
                            </div>
                        </li>
                        <li><a href="#">Pregnancy</a></li>
                        <li><a href="#">After Pregnancy</a></li>
                        <li><a href="#">New Born</a></li>
                        <li><a href="#">New Parents</a></li>
                    </ul>

score 0 · Answer 2 · edited May 23 '17 at 10:26

The correct, semantical way to do this would be to add a <section> for the submenu:

<ul id="menu-main-menu">
    <li class="has-mega-menu">
        <a href="#">Getting Pregnant</a>
        <section class="sub-menu>
            <h3>Topics</h3>
            <ul>
                <!-- Items -->
            </ul>
        </section>
    </li>
    <li><a href="#">Pregnancy</a></li>
    <li><a href="#">After Pregnancy</a></li>
    <li><a href="#">New Born</a></li>
    <li><a href="#">New Parents</a></li>
</ul>

Also, if you're going to have a "Topics" label on every section of the mega menu, you should probably put it in a span and the actual title of the category in your h3.

Source: How to semantically add heading to a list

How to create a megamenu in this situation?

` (as you stated) is not correct , since there's no `

2 Answers2