元素 ul 不允许作为元素 ul 的子元素（验证错误）答案

【问题标题】：Element ul not allowed as child of element ul (validation error)元素 ul 不允许作为元素 ul 的子元素（验证错误）
【发布时间】：2021-08-16 01:37:07
【问题描述】：

我不断收到验证错误，我试图将代码包装在 li 标记中，但它弄乱了按钮标记？？有没有办法让它工作不知道我哪里出错了有没有其他标签可以用来代替按钮标签？

  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="coffee-origin.html">Origins of Coffee</a></li>

  <ul class="subnav">
        <button class="subnavbtn">More About Coffee ▾ </button>

            <ul class="subnav-content">
                <li><a href="coffee-types.html"> Coffee Types</a></li>
                <li><a href="coffee-prduction.html"> Production</a></li>
                <li><a href="further-resources.html"> Further Resources</a></li>
            </ul>

  </ul>

  </ul>
</nav>

【问题讨论】：

this 有帮助吗？
为什么UL里面有个按钮？第二个 UL 应该在 LI 中，而不是作为 UL 的子节点
什么是验证错误？

标签： html css validation

【解决方案1】：

正确的 HTML 应该是 li 内的第二个 UL 和 li 内的按钮。

<nav>
  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="coffee-origin.html">Origins of Coffee</a></li>
    <li><button class="subnavbtn">More About Coffee ▾ </button>
      <ul class="subnav-content">
        <li><a href="coffee-types.html"> Coffee Types</a></li>
        <li><a href="coffee-prduction.html"> Production</a></li>
        <li><a href="further-resources.html"> Further Resources</a></li>
      </ul>
    </li>
  </ul>
</nav>

【讨论】：

【解决方案2】：

使用下拉菜单会更好

<div id="dropdown">
  <button onclick="showdrop()" id="dropbtn">More About Coffee ▾</button>
  <div id="dropdown-content" style="display:none;">
      <a href="coffee-types.html"> Coffee Types</a>
      <a href="coffee-prduction.html"> Production</a>
      <a href="further-resources.html"> Further Resources</a>
  </div>
</div>

在 javascript 中

function showdrop(){
 document.getElementById('dropdown-content').style.display="block";
 
}

【讨论】：