无序列表导航HTML结构

Question

我是一名初学者，将我的代码通过一个HTML验证器进行了检查。

关于我的导航，我收到了一条消息，内容为："在此上下文中，元素ul不能作为元素ul的子元素"

以下是HTML结构：

<nav>
<div class="nav_container">
<ul class="navigation">

 <ul class="logo">
    <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li>
</ul>
<ul class="subnav">
    <li><a href="index.htm">home</a></li>
   </ul>
<ul class="subnav">
    <li><a href="reclaimedwood.htm">reclaimed wood</a></li>
       <li><a href="design.htm">design</a></li>
   </ul>
   <ul class="subnav">
    <li><a href="flooring.htm">flooring</a></li>
    <li><a href="paneling.htm">paneling</a></li>
    <li><a href="beams.htm">beams</a></li>
</ul>
<ul class="subnav">
    <li><a href="shelving.htm">shelving</a>
    </li><li><a href="mantels.htm">mantels</a></li>
</ul>
<ul class="subnav">
    <li><a href="news.htm">news</a></li>
</ul>
<ul class="subnav">
    <li><a href="woodtypes.htm">wood types</a></li>
    <li><a href="phrases.htm">phrases</a></li>
</ul>

</ul>
</div>
</nav>

这有什么问题吗？在各种浏览器中都看起来很好。我应该担心还是采取行动呢？

- Doug Fir

---

将内部的无序列表用li标签包裹起来。编辑：Yaron比我先完成了。 - Kyle R

Answer 1

不能直接成为另一个
的子元素，它需要包含在
• 元素内。

<ul class="navigation">
  <li>
    <ul class="logo">
      <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="index.htm">home</a></li>
   </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="reclaimedwood.htm">reclaimed wood</a></li>
      <li><a href="design.htm">design</a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="flooring.htm">flooring</a></li>
      <li><a href="paneling.htm">paneling</a></li>
      <li><a href="beams.htm">beams</a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="shelving.htm">shelving</a></li>
      <li><a href="mantels.htm">mantels</a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="news.htm">news</a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="woodtypes.htm">wood types</a></li>
      <li><a href="phrases.htm">phrases</a></li>
    </ul>
  </li>
</ul>



你可以通过在li中添加子ul之前的标题来为菜单增加一些标题。

- Last Rose Studios

Answer 2

你必须使用li标签将每个内部的ul包裹起来。

<ul class="navigation">
    <li>
        <ul>
           <li>...</li>
        </ul>
    </li>
    <li>
        <ul>
           <li>...</li>
        </ul>
    </li>
    <li>
        <ul>
           <li>...</li>
        </ul>
    </li>
</ul>

- Yaron U.

Answer 3

您的结构可能是错误的。Logo 不是列表或列表项。包含仅为另一个列表的列表项通常是没有意义的。

使用标题元素作为 Logo（我通常在主页上使用 H1，在其他页面中使用带有链接的 H3）：

<!-- for home page -->
<h1 id="logo">Company</h1>

<!-- for other pages -->
<h3 id="logo"><a href="/">Company</a></h3>

确保您的导航具有正确的层次结构，如下所示：

<ul>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Tablets</a></li>
        </ul>
    </li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </li>
</ul>

在这个例子中，每个LI都有自己的链接和该链接所代表的章节的子部分，因此链接文本是子部分列表的标题。

- Marat Tanalin

Answer 4

你需要将其包装起来

<ul class="navigation">
 <ul class="logo">

作为

<ul class="navigation">
   <li>
    <ul class="logo">
     ...
    </ul>
  </li>

等等……

- Shawn Taylor