为什么验证器不喜欢我的下拉菜单？

Question

我正在尝试使用 html/css 创建下拉菜单。菜单看起来不错，但验证器告诉我：

Element ul not allowed as child of element ul in this context

这是为什么？还有另一种（更好的）方法可以做到这一点吗？我的代码如下所示：

          <ul id="meny">
            <li>Svenska</li>
                <ul class="undermeny">
                    <li><a href="om_spelet.html#Spel1">Spel 1</a></li>
                    <li><a href="om_spelet.html#Spel2">Spel 2</a></li>
                    <li>Spel 3</li>
                </ul>
            <li>Matematik</li>
                <ul class="undermeny">
                    <li>spel 1</li>
                    <li>Spel 2</li>
                    <li>Spel 3</li>
                </ul>
            <li>Engelska</li>
                <ul class="undermeny">
                    <li>spel 1</li>
                    <li>Spel 2</li>
                    <li>Spel 3</li>
                </ul>
            <li>NO</li>
                <ul class="undermeny">
                    <li><a href="om_spelet.html#No_Spel1">Spel 1</a></li>
                    <li>Spel 2</li>
                    <li>Spel 3</li>
                </ul>
            <li>SO</li>
                <ul class="undermeny">
                    <li>spel 1</li>
                    <li>Spel 2</li>
                    <li>Spel 3</li>
                </ul>
        </ul>

Answer 1

只有列表项可以是列表元素的子元素。

逻辑上，子列表构成 "heading" 列表项的一部分。将它们移到里面。

意思是，正确的语法应该是：

<ul id="meny">
  <li>Svenska
      <ul class="undermeny">
          <li><a href="om_spelet.html#Spel1">Spel 1</a></li>
          <li><a href="om_spelet.html#Spel2">Spel 2</a></li>
          <li>Spel 3</li>
      </ul>
  </li>
  ....
</ul>

Answer 2

如错误所述，您不能将 ul 作为另一个 ul 的直系后代。解决方案是将 child ul 包裹在每个 li.

中

<ul id="meny">
    <li>Svenska
        <ul class="undermeny">
            <li><a href="om_spelet.html#Spel1">Spel 1</a></li>
            <li><a href="om_spelet.html#Spel2">Spel 2</a></li>
            <li>Spel 3</li>
        </ul>
    </li>
    <li>Matematik
        <ul class="undermeny">
            <li>spel 1</li>
            <li>Spel 2</li>
            <li>Spel 3</li>
        </ul>
    </li>
    <li>Engelska
        <ul class="undermeny">
            <li>spel 1</li>
            <li>Spel 2</li>
            <li>Spel 3</li>
        </ul>
    </li>
    <li>NO
        <ul class="undermeny">
            <li><a href="om_spelet.html#No_Spel1">Spel 1</a></li>
            <li>Spel 2</li>
            <li>Spel 3</li>
        </ul>
    </li>
    <li>SO
        <ul class="undermeny">
            <li>spel 1</li>
            <li>Spel 2</li>
            <li>Spel 3</li>
        </ul>
    </li>
</ul>

为什么验证器不喜欢我的下拉菜单？

Why doesn't the validator like my drop down menu?

html

css

drop-down-menu