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>

问题是h3或p不允许作为ul的孩子。在我的情况下，我需要添加一个标题，如＆＃34; Topics＆＃34;然后低于某些li s。 HWhat是最好的选择吗？正确的？感谢

Answer 1

找到解决方案：

删除

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

并添加div代替。所以这样w3c就会验证它。所以我们将：

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

Answer 2

执行此操作的正确，语义方法是为子菜单添加<section>：

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

此外，如果您要在大型菜单的每个部分都有“主题”标签，则应该将其放在span中，并在h3中添加该类别的实际标题}。

来源：How to semantically add heading to a list

如何在这种情况下创建一个大型菜单？

2 个答案: